CSS vertical-align 属性确定内联、内联块或表格单元格文本的垂直对齐方式。
可能的值
- baseline：元素的基线与父元素的基线对齐。
- sub：将元素的基线降低到适合下标文本的点。
- super：将元素的基线提高到适合上标文本的点。
- top：在内联内容的上下文中，元素框的顶部与行框的顶部对齐，或者在表的上下文中与表单元格的顶部对齐。
- text-top：元素框的顶部与行中最高的内联框的顶部对齐。
- middle：在内联内容的上下文中，元素的基线与父元素的基线加上父元素字体的 x 高度的一半定义的点对齐。
- bottom：在内联内容的上下文中，元素框的底部与行框的底部对齐，或者在表的上下文中与表单元格的底部对齐。
- text-bottom：元素框的底部与行中最低内联框的底部对齐。
- percentage：元素的基线按属性行高值的给定百分比升高或降低。
- length：元素的基线被给定的长度值升高或降低。此属性允许使用负长度值。此属性的长度值为 0 与值基线具有相同的效果。
适用于
内联级别和表元素。
DOM 语法
object.style.verticalAlign = "baseline";
CSS vertical-align - text-bottom 值
下面是一个示例
<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>
