CSS 对齐 vertical-align 属性

描述

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

可能的取值

baseline − 元素的基线与父元素的基线对齐。
sub − 元素的基线下降到适合下标文本的位置。
super − 元素的基线上升到适合上标文本的位置。
top − 元素框的顶部与行框的顶部对齐（在内联内容上下文中），或与表格单元格的顶部对齐（在表格上下文中）。
text-top − 元素框的顶部与行中最高内联框的顶部对齐。
middle − 元素的基线与父元素的基线加上父元素字体 x 高度的一半所定义的点对齐（在内联内容上下文中）。
bottom − 元素框的底部与行框的底部对齐（在内联内容上下文中），或与表格单元格的底部对齐（在表格上下文中）。
text-bottom − 元素框的底部与行中最低内联框的底部对齐。
percentage − 元素的基线根据属性 line-height 的给定百分比值上升或下降。
length − 元素的基线根据给定的长度值上升或下降。该属性允许负长度值。对于此属性，长度值为 0 具有与基线相同的效果。

适用于

行内级元素和显示为表格单元格的元素。

DOM 语法

object.style.verticalAlign = "baseline";

示例

下面是示例 −

<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>

输出 −

CSS 对齐 vertical-align 属性