vertical-align，今晚来我房间聊聊剧本

做者GitHub：GitHub

仍是来GitHub点个Star吧，啊，各位吴彦祖和高圆圆？

写在前面

CSS最使人困惑的属性是什么？vertival-align

由于它老是达不到咱们想要的效果

一个logo加一个标题，一个头像加一个名字，要让它们俩垂直居中

一通乱试以后，是否是只能恼怒的用float或者margin、padding

今天，咱们就来好好调教一下vertival-align这个傲娇女神

概念

• line box

由若干行内元素占据的一行，会有一个虚拟的框，该行全部行内元素都在这个框里面，W3C把这个框叫作line box

line box的高度由里面最高的行内元素撑起

若是里面行内元素的总宽度超过一行，则换行显示

• text box

假如line box里面有一个英文字母x，这个字母的全部属性均继承自父元素

你把字母x用span包裹起来，设置背景颜色，背景颜色覆盖的高度就是text box的高度

固然，它是由font-size和line-height共同决定的

text box是有其实的，你看那字母x明晃晃的背景颜色

只不过名字是我杜撰的，跟line box对应

W3C叫它父元素的文字，我以为不是很好理解

• 金线

vertival-align是垂直对齐属性，那它是跟谁对齐呢？

确定是跟line box相关的某条线对齐，我把它叫作金线

咱们都知道，小写字母x落在text box的基线上，小写字母g落在text box的底线上

字母x的下边缘就是vertival-align: baseline;所要对齐的金线

金线这个名字也是我取的，由于它是一个准绳

其实说白了vertival-align默认值对齐的就是text box的基线，因此它跟父元素的font-size和line-height都有关系

本文不讨论它们之间的关系，假设父元素的font-size和line-height都是固定的

固然不一样的属性值，金线的标的也是不同的，后面会讲到

金线虽然是一个准绳，它却没什么骨气，有时候会去迁就比较高的行内元素

• inline元素和inline-block元素

vertival-align只对这两种元素（或者变种）有效

一招鲜

我们先来一个命中率极高的解决方案

回到最前面的问题：一个logo加一个标题，一个头像加一个名字，要让它们俩垂直居中

<div>
    <img src="avatar.png">
    <span>biu</span>
</div>
复制代码

你给span加vertical-align: middle;，但是达不到效果

你给img加vertical-align: middle;，仍是达不到效果

不是说好的垂直居中嘛，无赖呀！

其实，你给它们俩都加上vertical-align: middle;试试，效果是否是出来了？

咱们潜意识确定认为vertical-align是相对另外一个元素对齐，不然怎么会指望达到咱们想要的效果呢？

由于vertical-align是相对金线对齐，每一个元素都要分别设置才能统一实现垂直居中

那你说我写在父元素上可不能够？

想走捷径，能够

你在父元素上写vertical-align: middle;，而后你还要在每个行内元素上写vertical-align: inherit;

由于vertical-align默认是不继承的

惊不惊喜！

固然，若是父元素显式的设置了高度，而且比里面任何行内元素都要高，那一招鲜也蔫了，后面有例子

属性值

<style type="text/css"> body { margin: 0; } .line-box { padding: 0 80px; background: #ff0; } .x { background: #6ade91; } .rect { display: inline-block; width: 100px; margin: 0 20px; background: #6ade91; overflow: hidden; } .top { height: 300px; vertical-align: top; } .bottom { height: 100px; vertical-align: bottom; } .text-top { height: 200px; vertical-align: text-top; } .text-bottom { height: 400px; vertical-align: text-bottom; } .middle { height: 100px; vertical-align: middle; } .baseline { height: 200px; vertical-align: baseline; } .visible { height: 200px; background: #f00; vertical-align: baseline; overflow: visible; } </style>

<div class="line-box">
    <span class="x">x</span>
    <span class="rect top">top</span>
    <span class="x">x</span>
    <span class="rect bottom">bottom</span>
    <span class="x">x</span>
    <span class="rect text-top">text-top</span>
    <span class="x">x</span>
    <span class="rect text-bottom">text-bottom</span>
    <span class="x">x</span>
    <span class="rect middle">middle</span>
    <span class="x">x</span>
    <span class="rect baseline">baseline</span>
    <span class="x">x</span>
    <span class="rect visible">
        <span>baseline</span>
        <span>visible</span>
    </span>
    <span class="x">x</span>
</div>
复制代码

经过这张图，咱们来聊一聊不一样属性值所对应的金线是什么

• top: 金线所在的位置是line box的上边

• bottom: 金线所在的位置是line box的下边

• text-top: 金线所在的位置是text box的上边，也就是字母x背景颜色的上边

• text-bottom: 金线所在的位置是text box的下边，也就是字母x背景颜色的下边

• middle: 金线所在的位置是字母x的中部，也就是叉相交的地方

• baseline: 金线所在的位置是字母x的下边

须要注意的是，最后一个矩形和前一个矩形都是vertical-align: baseline;，不一样的是最后一个矩形overflow的属性值是visible

而前面全部矩形都是overflow: hidden;

为何呢？

由于若是行内元素里面有文字，而行内元素的垂直对齐又是默认值时，是以行内元素里面最底部的文字基线和text box的基线对齐

然而若是设置了overflow: hidden;，就会触发BFC，文字就不会影响对齐点了

我是为了附上文字，方便比较，因此让前面的矩形都触发了BFC

一个例子

我但愿实现图片垂直居中，怎么弄？

直接给图片设置vertical-align: middle;确定是不行的

由于图片比较高，金线会去迁就图片

结果就是图片纹丝不动，字母x对齐图片中间

<style type="text/css"> body { margin: 0; } .box { height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
</div>
复制代码

我看到网上有一篇文章是这样作的

加一个span标签，变成inline-block元素，高度和父元素同样高，宽度1px，若是没有背景颜色，它几乎能够忽略不计

而后给图片和这个span同时设置vertical-align: middle;

哎，发现真的可行

他解释说图片须要一个居中对齐的标杆，因此生造一个span，就可使图片居中了

效果是达到了，然而解释是错误的

图片对齐span，那span对齐谁呢？

其实图片和span都是对齐金线，由于span的高度和父元素的高度一致，金线为了迁就它，就跑到父元素中间去了。而后图片再去对齐金线，因而图片也居中了

标杆永远是金线，只不过金线的位置是动态计算的，有时候要去迁就比较高的行内元素

<style type="text/css"> body { margin: 0; } .box { height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } .box .blank { display: inline-block; width: 1px; height: 500px; background: #f00; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
    <span class="blank"></span>
</div>
复制代码

其实还有一种办法，给父元素设置行高等于高度

这时候text box的高度和父元素的高度是同样的，金线不须要去迁就职何人，图片只管对齐它就是了

<style type="text/css"> body { margin: 0; } .box { height: 500px; line-height: 500px; padding-left: 300px; background: #ff0; } .box img { width: 200px; vertical-align: middle; } </style>

<div class="box">
    <span>x</span>
    <img src="Adjani.png">
</div>
复制代码

总结

首先，line box里有一个text box，同时还有一根金线

不一样的垂直对齐属性值，对标的金线是不一样的，因此多个元素可能对标多根金线，这是没问题的

金线虽然是准绳，但它的高度是动态计算的，有可能要去迁就很高的行内元素

若是行内元素里面有文字，且属性值为baseline的时候，是以里面文字的基线去对齐金线

但若是触发BFC，则上一条失效

张鑫旭讲到过，middle只是近似垂直居中，有兴趣的能够去了解一下

若是金线跟text box有关，你能够在line box里放一个没有任何样式的小写字母x，给它一个背景色（好吧背景色也是样式），方便查看金线大概在哪里

金线，当它是text box的一部分时，确定跟父元素的font-size和line-height是有关的，这个之后咱么再聊

其实大多数状况，一招鲜均可以解决，就是给全部行内元素设置垂直居中

总之，找到金线，你就找到组织了

写在后面

我和大家同样，每次见到一行有多个行内元素就犯怵

因此下定决心弄清楚vertical-align的原理，但愿对你们有一点微小的启发

以上都是我本身的理解，金线也是我自创的，可能不是很严谨

CSS是一门玄学，够用就好

做者GitHub：GitHub

仍是来GitHub点个Star吧，啊，各位吴彦祖和高圆圆？