vertical-align

在了解vertical-align之前我们先了解基线：
在了解基线之前我们先了解Inline Element，Inline-Block Element，Line Box
Inline Element：内联元素
Inline-Block Element：内联块状元素
Line Box：由以上两点组成的一行

基线：
Inline Element的基线就是x的底部
Inline-Block Element的基线默认是其内部单词的最后一个单词的底部,但是如果他是绝对定位，或者overflow:hidden 则他的基线就是margin-bottom的底部
Line Box的高度默认是他内部最高处的元素的最上面和他内部最低处的元素的底部的距离，他的基线默认是很难看到的,但是我们依然可以想办法看到,在该行的最前面写上一个字母x,这个x的底部就是基线 同Inline Element元素一样(所以理论上我们可以通过line-height调整该元素的基线位置)

所以设置内联元素的vertual-align本质上是设置内联元素的基线相对于Line Box基线的位置
baseline: 元素的基线刚好放置在line box基线的上。
sub: 元素的基线放置在line box基线的下面。
super: 元素的基线放置在line box的基线的上面。
middle：元素的顶部与底部边缘的中点相对于line box的基线移动x-height的一半的位置对齐。

所以如果我们希望两个内联元素底部对齐,我们只需要将他们的基线设置为该行的基线就是baseline就可以了
如果我们希望两个内联元素居中对齐呢？比如一个图片一个文字？
我们首先让图片vertical-align: middle; 然后设置文字在span块内垂直居中,可以通过height: 40px; line-height: 40px; display: inline-block;来实现，然后也设置文字vertical-align: middle;

一般我们有时候会设置某个元素的vertical-align,却发现其他元素的位置改变了，
如果在一行中，有一个高的元素占据了整行的高度，vertical-align对它不会有任何影响。在它的顶部上面与底部下面没有任何多余的空间可以移动它。为了实现它相对于line box基线的对齐，line box的基线必须移动。其他针对于line box基线对齐的元素自然也会相应的改变位置

参考:https://segmentfault.com/a/1190000007663895

 

然而在不同浏览器上 vertual-align的表现并不一致,准确说某些属性并不一致,目前确定的是middle top bottom baseline是可以一致的.