神奇的vertical-align

说它神奇，一是因为它的各个属性的呈现出来的效果跟我们预想的总是不一样，这是因为属性的规定中有几个关键点容易忽略；二是它会受到一些其他样式属性的影响。

• 适用元素：
  • inline
  • inline-block
  • table-cell
• 它的属性中的几个关键点要先说明下，在下面看的时候要着重看：
  • 基线的定义：元素中‘x’字母的底部所在的直线就是基线
  • 参照点，即相对于谁的哪个属性，多数是相对父级
• 具体属性和定义：
  • baseline（默认）：元素基线与父元素的基线对齐。
  • top: 元素及其后代的顶端与整行的顶端对齐。
  • bottom：元素及其后代的底部与整行的底部对齐。
  • text-top：元素顶端与父元素字体的顶端对齐。
  • text-bottom：元素底端与父元素字体的底端对齐。
  • middle：元素的中心与元素的基线加上小写x一半的高度值对齐。

注意’middle’属性的参照点：是父级元素基线再加上小写x的一半高度值，不是中心对中心。

另外一个要注意的重点是：

当元素是

inline-block

，并且设置了

overflow

的值不是

visible

，此时元素中文本的对齐方式是这样的：元素的底部与父级元素的基线对齐，但是默认的

vertical-align

的值还是

baseline

，解决方案是：设置

vertical-align: bottom

，让元素的底部与父级元素的底部对齐。