该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。注意：vertical-align属性只对行内元素、表格单元格元素生效。

属性

属性值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
text-top	把元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐。
top	把元素的顶端与行中最高元素的顶端对齐
bottom	把元素的顶端与行中最低的元素的顶端对齐。
middle	把此元素放置在父元素的中部。根据父元素文字基线 + 字母x的一半高度对齐
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

top——bottom ==> line-height, 但text-top——text-bottom不是font-size的大小，详情见深度剖析Css Baseline

例子：文字对齐

verticalAlign baseline(default) verticalAlign middle
verticalAlign text-top verticalAlign top
verticalAlign text-bottom verticalAlign bottom
verticalAlign super verticalAlign sub
verticalAlign 12px verticalAlign -12px

例子：在表格中的对齐

<table style="height: 50px;">
    <tr>
        <td>hello</td>
        <td style="vertical-align: bottom;">world</td>
    </tr>
</table>

hello

world

关于vertical-align

属性

例子：文字对齐

例子：在表格中的对齐