CSS|vertical-align属性|垂直对齐文本

​vertical-align​属性设置元素的​垂直对齐​。 常用的值是​top​，​middle​和​bottom​。

• ​top: ​ 使元素及其后代元素的顶部与整行的​​顶部​对齐​。
• ​middle: ​ 使元素的中部与父元素的基线加上父元素x-height的​一半对齐​。
• ​bottom:  ​使元素及其后代元素的底部与整行的​底部对齐​。

下面的示例显示了如何垂直对齐表格之间的文本。

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
  <tr>
     <td class="top">Top</td>
     <td class="middle">Middle</td>
     <td class="bottom">Bottom</td>
  </tr>
</table>

CSS代码：

td.top {
   vertical-align: top;
}
td.middle {
   vertical-align: middle;
}
td.bottom {
   vertical-align: bottom;
}

执行结果：

vertical-align​属性还包含以下值：​baseline​，​sub​，​super​，​%​和​px​(或​pt​，​cm​)。

• ​baseline:  ​使元素的基线与父元素的​基线​对齐。
• ​sub:  ​使元素的基线与父元素的​下标基线​对齐。
• ​super: ​ 使元素的基线与父元素的​上标基线​对齐。

• ​px : ​使元素的基线对齐到父元素的基线之上的给定长度。可以是​负数​。

下面的例子显示了它们之间的区别。

HTML代码：

<p>This is a <span class="baseline">rhzhz.cn</span> example.</p>
<p>This is a <span class="sub">rhzhz.cn</span> example.</p>
<p>This is a <span class="super">rhzhz.cn</span> example.</p>
<p>This is a <span class="pixel">rhzhz.cn</span> example.</p>

CSS代码：

span.baseline {
    vertical-align: baseline;
}
span.sub {
    vertical-align: sub;
}
span.super {
    vertical-align: super;
}
span.pixel {
    vertical-align: -10px;
}

 可以使用​pt(点)​，​cm(厘米)​和​%(百分比)​值来代替​px​值。

vertical-align​属性对​所有元素​的​行为​都​不一样​。

例如，div元素需要一些额外的CSS样式。

HTML代码：

<div class="main">
   <div class="paragraph">
   rhzhz.cn
   </div>
</div>

CSS代码：

.main {
    height: 150px; width: 400px;
    background-color: LightSkyBlue;
    display: inline-table;
}
.paragraph {
    display: table-cell;
    vertical-align: middle;
}

display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果。