vertical-align 垂直对齐

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的.注意，vertical-align和line-height的地下基友关系从HTML5文档声明开始的

 

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

 

inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的

 

<div style="line-height:200px; border:1px solid #34538b;">

    <span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>后面是静止的文字。

</div>

vertical-align:text-top    让当前box的顶部与父元素的文字的顶部对齐(父标签里面单纯的文字，指无标签，无嵌套的文字)

 

vertical-align:middle 如果图片大小比字体大小和行高都大，它会把撑大下面的边距

 

vertical-align:text-bottom

 

 

vertical-align:text-top   注意有些字体的顶部会有一些空白，实际上是和字顶部对齐的

vertical-align:bottom,top和上面文字对齐类似，但是它是与行内最低元素和最高元素对齐

 

 

 

vertical-align: sub（下标）   super（上标）

 

 

 

图片下面的留白问题，就是vertical-align和line-height背地里搞基造成的。一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。