vertical-align 垂直对齐属性
最后更新：2026-09-13
vertical-align vertical-align 垂直对齐属性
vertical-align 属性用于控制行内元素或表格单元格内容的垂直对齐方式。它支持关键字（如 top、middle、baseline）和长度/百分比值，常用于对齐图标与文字、调整行内元素位置，或在表格中控制内容的垂直位置。需要注意的是，vertical-align 对块级元素无效。
| 分类 | |
|---|---|
| 初始值 | baseline |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
baseline | sub | super | text-top | text-bottom | middle | top | bottom | 关键字 | 垂直对齐关键字 |
<length> | <percentage> | 类型 | 精确偏移值 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| vertical-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： vertical-align 的对齐是相对于当前行的行框（line box）或表格单元格的，而非父容器整体。
注意： vertical-align 对块级元素（如 div、p）无效。要让块级元素垂直居中，需使用 Flexbox 或 Grid。
❓ 常见问题
Qvertical-align: middle 为什么不能垂直居中元素？
Avertical-align: middle 是将元素的垂直中点与父元素基线加上 x 高度的一半对齐，并非相对于父容器居中。它主要用于行内元素的微调，不是真正的垂直居中方案。
Q图片底部为什么有缝隙？
A图片默认是行内元素，底部会留出容纳字母下伸部分（descender）的空间。设置 vertical-align: bottom/middle/top 或 display: block 可以消除这个缝隙。
Q如何让图片和文字垂直居中？
A在图片或相邻行内元素上写 vertical-align: middle，图片与文字会视觉居中。若要严格对齐，可将图片设为 display: inline-block 配合 vertical-align: middle，或用 Flexbox 的 align-items: center。
Qvertical-align 为什么对 div、p 无效？
Avertical-align 只作用于行内元素、行内块和表格单元格（td/th），用于把自身相对所在行基线对齐；块级元素（div、p）不受影响。想让块级元素垂直居中，请使用 Flexbox 或 Grid。
🏷️ 相关属性
💡 相关案例
📚 相关教程
