Vertical-Align，你应该知道的一切

对哪些元素可以使用Vertical-Align

vertical-align

用于对齐行内元素。所谓行内元素，即

display

属性值为下列之一的元素：

• inline

• inline-block

• inline-table

   （本文未涉及）

其中，行内元素（inline element）就是包含文本的标签。

而行内块元素（inline-block element），顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。

行内级元素会相互挨着排成行。如果一行排不下，就会在下方再建一行。所有行都会创建所谓的行盒子，行盒子装着自己行中的所有内容。内容的高度不同，行盒子的高度也不同。在下面的示意图中，行盒子的顶部和底部用红色点线表示。

这些行盒子限定了我们可以影响的范围。在行盒子内部，可以通过

vertical-align

来对齐个别元素。那么，相对于什么来对齐元素呢？

基线与外边界

垂直对齐最重要的参考点，就是相关元素基线。某些情况下，行盒子的上下外边界也会成为参考点。下面我们就来看一看相关元素类型的基线和外边界。

行内元素

这里有三行文本紧挨着。红线表示行高的顶边和底边，绿线表示字体高度，蓝线表示基线。左边这一行，行高与字体高度相同，因此上下方的红色和绿线重叠在了一起。中间一行，行高是

font-size

的两倍。右边一行，行高为

font-size

的一半。

行内元素的外边界与自己行高的上、下边对齐。行高比

font-size

小不小并不重要。因此上图中红线同时也就表示外边界。

行内元素的基线是字符恰好位于其上的那条线，也就是图中的蓝线。大致来说，基线总是穿过字体高度一半以下的某一点。

行内块元素

从左到右：包含留内内容（“c”）的行内块、包含流内内容且设置了溢出（

overflow: hidden

）的行内块和未包含流内内容（但内容区有高度）的行内块。红线表示外边距的边界，×××是边框，绿色的内边距，蓝色是内容区，蓝线是每个行内块元素的基线。

行内块元素的外边界即其外边距盒子的上、下两边，也就是图中的红线。

行内块元素的基线取决于元素是否包含流内内容：

• 有流内内容的行内块元素，基线就是正常流中最后内容元素的基线（左）。这个最后元素的基线是按照它自己的规则找到的。

• 有流内内容但

  overflow

  属性值不是

  visible

  的行内块元素，基线就是外边距盒子的底边（中）。也就是与行内块元素的下外边界重合。

• 没有流内内容的行内块元素，基线同样是外边距盒子的底边（右）。