摘要：如何让一段文字居中，在人类看来如此简单的问题，在界却变成了多年令人头疼的问题，关于居中的文字如汗牛充栋，但每到用时还是会有问题。关于垂直居中，中最基本的一个属性就是，要了解，首先要了解基线，因为的缺省值就是。元素放置在父元素的基线上。
如何让一段文字居中，在人类看来如此简单的问题，在css界却变成了多年令人头疼的问题，关于居中的文字如汗牛充栋，但每到用时还是会有问题。单单一个『中』是什么，在css里就有两种不同的称呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3时代引入了更多混乱，flex布局里垂直居中也可以用center了）。
水平居中相对简单，而垂直居中的问题如果没有透彻理解的话，即使这一次做出来了，下一次情况稍加不同，又变得无所适从。
关于垂直居中，css中最基本的一个属性就是vertical-align，要了解vertical-align，首先要了解基线(baseline)，因为vertical-align的缺省值就是baseline。MDN的文档中只说了一句：baseline: 默认。元素放置在父元素的基线上。
那么这个父元素的基线到底是个什么鬼？怎么才能决定父元素的基线在哪里呢？
先来看一个简单的例子：
相关css:
.container {
border: 1px solid green;
}
.container img {
width: 300px;
border: 1px solid red;
vertical-align: baseline;
}
.aaa {
display: inline-block;
border: 1px solid red;
vertical-align: baseline;
}
为了清楚起见，我们给每一个元素都加上边框，并且写明vertical-align: baseline，然后我们来看一看效果：
注意最左侧那个黑点，我们特意要留着它。在这里，可以很清楚地看到，当我们指定vertical-align为baseline的时候，文字是贴着底边的，但图片并没有贴底，而是位于最下面一行文字的中间。也就是说，对于图片来说，所谓的『父元素的基线』其实指的是最下面一行文字的中间。
这是文字多的情况，那么文字少的情况呢？也是一样，图片的底边始终等于我们最下面一行文字的中间：
现在我们只改动一行代码，让img的vertical-align等于middle，这时候，诡异的情况发生了：
因为我们最左侧的文字部分的vertical-align还是baseline，而只有右边的img的vertical-align改成了middle，所以整个父元素的基线向上漂移了，现在文字部分依然对齐向上漂的父元素的基线，而图片是以自己的中线对齐父元素的基线，这就是middle的作用。
那如果我们倒过来看一下，图片依然vertical-align: baseline，而文字vertical-align: middle呢？
不出所料，父元素的基线向上漂移，文字元素以自己的中间对齐父元素的基线，而图片以自己的下边缘对齐父元素的基线。
最后，我们把文字和图片的vertical-align都设置为middle：
一般来讲，这个才是我们真正想要的结果。
所以结论是说，如果我们想要在父级元素里对两个或更多行内元素做垂直居中的话，是需要分别给所有元素设置vertical-align: middle的，因为这个属性不能继承，所以在container上设置没有用，需要给每个子元素设置。
感兴趣的同学可以来我的Codepen里玩一玩，看看是不是这么回事。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112999.html
摘要：用于对齐行内水平元素，即那些属性为或本文不考虑的元素。元素的基线取决于元素是否具有内容有内容，元素的基线是普通流中最后一个内容元素的基线例如左边那个。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经常需要并排地垂直对齐元素。 CSS ...
摘要：用于对齐行内水平元素，即那些属性为或本文不考虑的元素。元素的基线取决于元素是否具有内容有内容，元素的基线是普通流中最后一个内容元素的基线例如左边那个。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经常需要并排地垂直对齐元素。 CSS ...
摘要：关于的条参考线以及。关于和之间的关系。目标元素的的垂直平分线，与父元素内匿名的对齐。垂直平分线，这个容易理解。要比这些字母的顶端再高一些。 前言 关于 vertical-align，我们很容易想到，这不就是告诉我们元素在纵向上和什么对齐的属性吗？而事实上，正是这种宽泛的说法导致了我们对其的理解存在许多不确定性。事实上，对齐这两个字其实牵涉到4个对象：即哪个对象的哪条线，与哪个对象的哪条...
阅读 2791·2021-10-13 09:39
阅读 1589·2021-09-02 15:15
阅读 2260·2019-08-30 15:54
阅读 1694·2019-08-30 14:01
阅读 2422·2019-08-29 14:13
阅读 1242·2019-08-29 13:10
阅读 2620·2019-08-28 18:15
阅读 3428·2019-08-26 10:20
