css vertical-align

vertical-align指定了行级(inline-level)元素或表格单元格(table-cell)元素在line-box上的垂直对齐方式。

1.属性值

.baseline {vertical-align: baseline;}
.len {vertical-align: 20px;}
.per {vertical-align: -20%;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align:bottom ;}
.text-top {vertical-align: text-top ;}
.text-bottom {vertical-align: text-bottom;}
.inherit {vertical-align: inherit;}
.sub {vertical-align: sub;}
.super {vertical-align: super;}

（1）baseline

元素的基线与line-box的基线对齐。

<div>
    属性值<span class="baseline"></span>xxx属性值值。
</div>

图1 baseline

(2)长度值

以基线为基准，向上（正值）或向下（负值）偏移的距离。

<div>
     属性值<span class="len"></span>xxx属性值值。
</div>

图2 长度值

（3）百分比

是按照元素的line-height的值计算基准值的，100%的移动距离等于line-height的值。

<div>
    属性值<span class="per"></span>xxx属性值值。
</div>

图3 百分比

（4）middle

 元素的中垂线与line-box基线加字母x的1/2的高度对齐。

<div>
    属性值<span class="middle"></span>xxx属性值值。
</div>

图4 middle

(5)top

元素的顶端与line-box顶端对齐。

<div>
    属性值<span class="top"></span>xxx属性值值。
</div>

图5 top

(6)bottom

元素底端与line-box底端对齐。

<div>
    属性值<span class="bottom"></span>xxx属性值值。
</div>

图6 bottom

(7)text-top

元素的顶端与line-box内容区域的顶端对齐。

<div>
    属性值<span class="text-top"></span>xxx属性值值。
</div>

图7 text-top

(8)text-bottom

元素的底端与line-box的内容区域的底端对齐。

<div>
    属性值<span class="text-bottom"></span>xxx属性值值。
</div>

图8 text-bottom