目录

vertical-align

描述 (Description)

vertical-align属性确定行内或表单元格内文本的对齐方式。

可能的值 (Possible Values)

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

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

  • super - 元素的基线被提升到适合于上标文本的点。

  • top - 元素框的顶部与行内容的顶部对齐,在内联内容的上下文中,或与表格上下文中的表格单元格的顶部对齐。

  • text-top - 元素框的顶部与行中最高的内联框的顶部对齐。

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

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

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

  • percentage - 元素的基线按属性行高的给定百分比升高或降低。

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

适用于 (Applies to)

内联级元素和带有表格单元格的元素。

DOM语法 (DOM Syntax)

object.style.verticalAlign = "baseline";

例子 (Example)

这是一个例子 -

<html>
   <head>
   </head>
   <body>
      <table style = "height:200px; width:400px;border:1px solid red;">
         <tr>
            <td style = "vertical-align:bottom;" >
               <p>This will be aligned to bottom of the cell.</p>
            </td>
         </tr>
      </table>
   </body>
</html> 

这将产生以下结果 -

新页面打开
↑回到顶部↑
WIKI教程 @2018