vertical-align 属性指定内联、内联块或者表格单元框的垂直对齐方式。
内联级元素包括图像、文本、按钮等。
此属性仅适用于以下上下文：
- 垂直对齐表格单元格 (<td>) 内的内容和使用 display: table-cell 的元素。
- 垂直对齐行框内的行内元素的框。 例如。 它可用于在一行文本中垂直对齐 <img>。
我们不能使用 vertical-align 属性来垂直对齐块级元素。
| 初始值 | baseline |
|---|---|
| 应用于 | 内联级别和表格单元元素，也适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 是的。垂直对齐是可动画的。 |
| 版本 | CSS1. |
| DOM 语法 | object.style.verticalalign =“middle”; |
语法
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom| text-bottom | initial | inherit;
具有“sub”值的 vertical-align 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align 属性示例</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
结果
具有“中间”值的垂直对齐属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align 属性示例</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
具有“super”值的 vertical-align 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align 属性示例</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
具有“顶部”和“底部”值的垂直对齐属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align 属性示例</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>
CSS vertical-align 属性值说明
| 值 | 描述 |
|---|---|
| baseline | 将元素的基线与其父母的基线对齐。这是一个默认值。 |
| length | 通过此距离提高（正值）或者更低（负值）框。允许负值。 |
| sub | 将盒子的基线降低到父箱的下标的正确位置。 |
| super | 将框的基线提升到父母框的上标的适当位置。 |
| top | 将对齐子树的顶部与线框的顶部对齐。 |
| text-top | 将框的顶部与父级内容区域的顶部对齐。 |
| middle | 将框的垂直中点与父框的基线对齐加上父级的X高度的一半。 |
| bottom | 将对齐子树的底部与行框的底部对齐。 |
| text-bottom | 将框的底部与父级内容区域的底部对齐。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
日期：2020-06-02 22:14:51 来源：oir作者：oir