CSS - vertical-align 属性



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

可能的值

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

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

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

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

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

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

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

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

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

  • 长度:元素的基线根据给定的长度值提高或降低。此属性允许使用负长度值。此属性的长度值为 0 与值 baseline 的效果相同。

应用于

内联级别和表格元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

DOM 语法

object.style.verticalAlign = "baseline";

CSS vertical-align - text-bottom 值

这是一个例子

Open Compiler
<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>This will be aligned to text-bottom of the cell.</p> </td> </tr> <tr> <td style = "vertical-align:top;"> <p>This will be aligned to top of the cell.</p> </td> </tr> <tr> <td style = "vertical-align:text-top;"> <p>This will be aligned to text-top of the cell.</p> </td> </tr> <tr> <td style = "vertical-align:baseline;"> <p>This will be aligned to baseline of the cell.</p> </td> </tr> <tr> <td style = "vertical-align:bottom;"> <p>This will be aligned to bottom of the cell.</p> </td> </tr> <tr> <td style = "vertical-align:middle;"> <p>This will be aligned to middle of the cell.</p> </td> </tr> </table> </body> </html>
广告