关于Vertical-Align

1、vertical-align

vertical-align用于对齐行内元素。所谓行内元素，即display属性值为下列之一的元素：
inline
inline-block
inline-table
而行内块元素（inline-block element）__，顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。

2、基线与外边界

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

img.jpg

这里有三行文本紧挨着。红线表示行高的顶边和底边，绿线表示字体高度，蓝线表示基线。左边这一行，行高与字体高度相同，因此上下方的红色和绿线重叠在了一起。中间一行，行高是font-size的两倍。右边一行，行高为font-size的一半。
行内元素的外边界与自己行高的上、下边对齐。行高比font-size小不小并不重要。因此上图中红线同时也就表示外边界。
行内元素的基线是字符恰好位于其上的那条线，也就是图中的蓝线。大致来说，基线总是穿过字体高度一半以下的某一点。可以参考W3C规范中详细的定义。