vertical-align是CSS里专门用来设置行内元素、行内块元素或者表格单元格内容垂直对齐方式的属性，它决定了元素在垂直方向上的位置基准，是处理文本和行内元素对齐问题的核心属性之一。
vertical-align的基本含义
vertical-align的作用对象是行内元素、行内块元素以及<td>、<th>这类表格单元格元素，它描述的是当前元素相对于其父元素的基线或者其他指定参考线的垂直对齐方式，而不是相对于整个容器的垂直居中。很多开发者误以为它可以让块级元素垂直居中，这其实是对它适用场景的误解。
vertical-align的常见取值
vertical-align的取值分为关键字取值、长度取值和百分比取值三类，下面是最常用的几种关键字取值说明：
| 取值 | 含义说明 |
|---|---|
| baseline | 默认值，元素基线与父元素的基线对齐 |
| top | 元素顶端与行内最高元素的顶端对齐 |
| middle | 元素中心与父元素的基线加上x-height的一半对齐，近似文本垂直居中 |
| bottom | 元素底端与行内最低元素的底端对齐 |
| text-top | 元素顶端与父元素字体的顶端对齐 |
| text-bottom | 元素底端与父元素字体的底端对齐 |
| sub | 元素基线降低到父元素的下标基线位置 |
| super | 元素基线升高到父元素的上标基线位置 |
vertical-align的使用示例
下面通过一个简单的行内块元素对齐示例，展示不同取值的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
font-size: 16px;
line-height: 40px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.box {
display: inline-block;
width: 80px;
height: 30px;
background-color: #e0e0e0;
}
.baseline .box {
vertical-align: baseline;
}
.middle .box {
vertical-align: middle;
}
.top .box {
vertical-align: top;
}
</style>
</head>
<body>
<div class="container baseline">
文本基线对齐
<div class="box"></div>
</div>
<div class="container middle">
文本垂直居中
<div class="box"></div>
</div>
<div class="container top">
元素顶端对齐
<div class="box"></div>
</div>
</body>
</html>
运行上面的代码可以看到，设置vertical-align: middle时，行内块元素的中心会和文本的中心近似对齐，而top取值会让元素顶端和行内最高内容的顶端对齐。
为什么vertical-align有时候不生效
很多开发者会遇到设置了vertical-align却没有效果的情况，常见原因有以下几点：
- 作用对象不是行内元素、行内块元素或者表格单元格，比如给块级<div>单独设置vertical-align是无效的，因为块级元素默认占满整行，没有垂直对齐的参考基准。
- 父元素没有设置行高，或者行高和元素高度一致，这时候垂直对齐的效果不明显，因为行内元素的对齐空间被压缩了。
- 混淆了垂直对齐的参考基准，vertical-align是相对于父元素的基线或者行框对齐，不是相对于父容器的高度居中，想要块级元素垂直居中需要使用flex布局或者定位等其他方案。
使用注意事项
在使用vertical-align时，需要注意如果父元素内有多个行内元素，它们的对齐方式是相互影响的，最高的元素会决定整行的行高，其他元素的对齐都是基于这个行高来计算的。另外，当元素设置float或者position: absolute/fixed之后，vertical-align也会失效，因为浮动和绝对定位会让元素脱离文档流，不再属于行内格式化上下文的一部分。
vertical-alignCSS行内元素对齐基线对齐修改时间：2026-07-01 08:09:22