CSS 属性

vertical-align 属性确定内联、内联块或表格单元格文本的垂直对齐方式。

属性值

  • baseline:元素的基线与父元素的基线对齐。

  • sub:元素的基线降低到适合下标文本的点。

  • super:元素的基线升高到适合上标文本的位置。

  • top:元素框的顶部对齐在内嵌内容的上下文中，与行框的顶部对齐，或者在表格上下文中，与表格单元格的顶部对齐。

  • text-top:文本顶部元素的盒子与行中最高的行内盒子的顶部对齐。

  • middle:元素的基线与父元素的基线加上定义的点对齐在内联内容的上下文中，父元素字体的 x 高度的一半。

  • bottom:元素框的底部与行框的底部对齐，在内联内容的上下文，或表格上下文中表格单元格的底部。

  • text-bottom:元素框的底部与元素框的底部对齐行中最低的行内框。

  • percentage:元素的基线升高或降低属性 line-height 值的给定百分比。

  • length:元素的基线升高或降低给定的长度值。该属性允许使用负长度值。此属性的长度值为 0 与值基线具有相同的效果。

适用范围

内联级元素和表格元素。

DOM 语法

object.style.verticalAlign = "baseline";

CSS vertical-align 例子

这里是一个示例

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <table>
      <tr>
         <td style = "vertical-align:text-bottom;">
            <p>这将与单元格的文本底部对齐。</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:top;">
            <p>这将与单元格顶部对齐。</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:text-top;">
            <p>这将与单元格的文本顶部对齐。</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:baseline;">
            <p>这将与单元格的基线对齐。</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:bottom;">
            <p>这将与单元格底部对齐。</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:middle;">
            <p>这将与单元格的中间对齐。</p>
         </td>
      </tr>
   </table>
</body>
</html>