css中vertical-align生效

参考：https://www.jianshu.com/p/24c00a01da36

作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。
一、当父元素设置了line-height
父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。

vertical-align不可继承，必须对子元素单独设置。

数值详解：

首先关于数值，见下面的示例：
　.test{vertical-align:-2px;}
　元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。

再者关于百分数值，这里的vertical-align，是相对于此标签继承的line-height值决定的。例如，如下示例代码：
　.test{vertical-align:-10%;}
　假设这里的.test的标签继承的行高是20px，则这里的所代表的实际值是：-10%*20px=-2px。 IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。

inline元素作为父元素可以不设置line-height，字体会撑起一个适合子元素作用的高度。
div父元素必须设置line-height，否则对其设置vertical-align无效