vertical-algin的属性详解

top：官方解释：将元素行内框的顶端与包含该元素的行框的顶端对齐。

ps：inline-block：当该元素为行内框最高时：元素的行内框的顶端与包含该元素的第二高行内框的顶端对齐。第二高行内框有line-height值会增加行内框顶端的高度（inline-block除外）。增加的高度为(line-height  -   font-size)/2  =  增加的高度。

当改元素行内框不为最高时：行内的框的顶端与包含该元素的行框的顶端对齐。

inline：文本元素会与包含该元素的行框的顶端对齐。

 

bottm：官方解释：将元素行内框底端与包含该元素行框的底端对齐。

ps：inline-block：当该元素为行内框最高时：元素的行内框的底端与包含该元素的最低行内框的底端对齐。最低行内框有line-height值会增加行内框底端的高度（inline-block除外）。增加的高度为(line-height  -   font-size)/2  =  增加的高度。

当该元素行内框不为最高时：行内的框的底端与包含该元素的行框的底端对齐。

inline：文本元素会与包含该元素的行框的底端对齐。

 

 

middle：官方解释：将元素行内框的垂直中点与父元素基线上1/2x处的一点对齐。

ps：父元素基线的位置为：文字盒x的下端沿。如果要对齐两个同一行框中的元素，可将他们都设置为vertical-align:middle;文字盒的vertical-align值不起作用。他相当于一个参照物。

文字盒可以被认为是没有和任何元素对齐的line-box中的inline元素，它的高与它的父元素的font-size的值相同。因此，文字盒仅仅包含非格式化的行框的文本。文字盒在标准中被叫做strut，基线的位置发生变化的话，文字盒的位置也会跟着改变。

 

text-top：官方解释：将元素行内框的顶端与父元素内容区的顶端对齐。

ps：父元素内容区为文字盒font-size的顶端。

text-bottom：官方解释：将元素行内框的底端与父元素内容区的底端对齐。

ps：父元素内容区为文字盒font-size的底端。