一个常见的bug：
设置两列布局，左侧为导航条右侧为内容区，左侧导航条有50px的padding，并且含有三条导航，右侧只展示一个内容区，代码如下：
效果如下：
相信大家都遇到过这样的问题，也都知道解决这个问题我们只需要添加一个vertical-align这个属性就可以了，但是这是为什么呢？今天我们就来探讨一下vertical-align这个问题。
1. vertical-align是什么属性？
vertical-align是设置一个含有行级特点的元素垂直方向对齐方式的属性。
2. vertiacl-align作用的前提
vertical-align只能作用在display的值为inline、inline-block、inline-table或table-cell的元素上。
因此默认情况下span、strong、em等内联元素，img、button、input等替换元素，非html规范的自定义标签元素，以及td单元格都是支持vertical-align属性的。
但在css的世界中，总有一些“搅屎棍”影响着默认的状态，比如L浮动和绝对定位会让元素块状化，因此在vertical-align与float和position:absolute一起使用的时候是没有作用的。
3. vertical-align对齐的原理
根据W3C Spec中对vertical-align属性的定义：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
翻译：此属性影响由内联级元素生成的line-box内的垂直位置。
那么什么是line box？同样来自W3C Spec定义line box ：
The rectangular area that contains the boxes that form a line is called a line box.
翻译：包含形成一排内容的方框的矩形区域称为线框。
既然vertical-align是垂直方向上的对齐，我们就要注意line box的高度，那么line box的高度怎么计算呢？我们还是看下W3C Spec中的定义：
The height of a line box is determined by the rules given in the section on line height calculations.
翻译：line box的高度由文本的行高计算给出的规则决定。
转换成人话就是：
一个line box的高度是的计算方式如下：line box中的每一个行内元素都将加入到计算过程，如果是元素inline的则取其line-height的值，如果元素是inline-block或者是inline-table则取其margin-box的高度，最后这些值的最大值，即为line box的高度了。
4. 在vertical-align的世界中都有哪些对齐方式？
（1）baseline （默认值）
相对于基线对齐，那么问题来了line box的基线在哪？
我们先看一个代码
看下效果：
下面我们添加一下vertical-align这个属性让第一个inline元素的vertical-align的值为top，第二个inline元素的vertical-align值为bottom，中间inline-block元素和图片添加一个margin值为10px;在最后再加上一个span标签将其vertical-align设置为默认值baseline
代码如下：
效果如下：
下面我们找到line box
下面我们把每个元素自身的盒子画出来
w3c标准中并没有说明line-box的baseline的位置，这一点很让人困惑，baseline的位置需要满足vertical-align属性的值以及让line-box的高度最小等条件，是一个很灵活的参数。虽然line-box的baseline是不可见的，但是可以很轻松的将它可视化出来，如下图，默认情况下基线为书写字母的四线格中倒数第二条线。
由此可以轻松地将我们的实例程序的baseline画出，如下图：
由上图可见
line-box的基线是一个不固定的位置，对于图片类的不确定元素默认的基线再margin盒的底部
2）top 和bottom
上述案例中我们可见设置vertical-align：top和vertical-align：bottom的元素所在的位置为line box的顶部和底部。即值为top和bottom代表垂直方向按照line box的盒子顶部与底部对齐
3) sub 和 super
sub：行内元素盒的基线相对于line-box的基线，偏下一点（偏多少浏览器说了算）；
super：行内元素盒的基线相对于line-box的基线，偏上一点（偏多少浏览器说了算）；
为第一个span添加vertical-align:sub;第二个span添加vertical-align:super效果如下
4）middle
MDN中定义middle：行内元素盒的中心相对于行盒的基线，偏上1/2 x-height；
那么哪里是x-height呢？
维基百科中是这么说的：
Typically, this is the height of the letter x in the font (the source of the term), as well as the v, w, and z. (Curved letters such as a, c, e, m, n, o, r, s, and u tend to exceed the x-height slightly, due to overshoot.) One of the most important dimensions of a font, x-height is used to define how high lower-case letters are compared to upper-case letters.
有道翻译一下：
通常，这是字体中字母x的高度(术语的来源)，以及v、w和z的高度。字体最重要的维度之一，x-height用于定义小写字母与大写字母的比较高度。
即：
也就是vertical-align:middle表示元素向上偏移二分之1的x-height大小
再次修改我们的案例将第一个span的vertical-align的值设置成middle
此时你会发现设置vertical-align：middle的元素基线会向下移而不是向上移动，这是因为middle对齐的不再是基线而是元素自身的中心位置与linebox的基线位置如下middle的位置。
5)text-top和text-bottom
text-top：相对于父级元素下文本的顶部对齐
text-bottom：相对于父级元素下文本的底部对齐
一个案例：
代码：
效果：
6）具体像素
元素的基线相对于line box的基线通过绝对值的大小进行移动。
一个案例：
代码：
效果：
7）百分比
元素的基线移动相对于line box的基线通过相对于line-height的百分比的值来移动。
一个案例：
代码：
效果：
回到最初的起点，辣个bug
设置两列布局，左侧为导航条右侧为内容区，左侧导航条有50px的padding，并且含有三条导航，右侧只展示一个内容区
代码如下：
效果如下：
上述效果中右侧内容区部分明明没有设置任何的margin和定位却向下偏移了一些，导致这样效果的原因就是在多行的文字中基线的位置。
那么问题又来了多行文字组成的块区域基线在哪？
查看父级的基线我们只需要给父级加上一个文本节点x，如下
效果如下：
这样line box的基线可显而知
由此我们可以得出结论：如果多行元素会影响linebox的基线位置下移至最高的元素最后一行的基线处。
当你知道了规则，vertical-align就没那么复杂了吧。
如果vertical-align并没有按照你想的那样行动，问自己两个问题：
line box的顶部与底部边缘和基线在哪里？
元素的顶部与底部边缘和基线在哪里？
· · · 要 不 再 看 看 · · ·
-
更多有趣的
请戳一戳
如果觉得《常见布局错位问题解决办法》对你有帮助，请点赞、收藏，并留下你的观点哦！
