CSS vertical-align 属性详解：表格与图文对齐的实用指南

在 CSS 中，vertical-align 是一个容易让人误解的属性------它的名字听起来像是"让任何元素垂直居中"，但实际上它只在特定场景下生效。本文将结合 MDN 官方文档，带你彻底搞懂它的真正用途、适用元素以及两个最经典的实战场景。

一、vertical-align 到底是什么

vertical-align 属性用来指定行内（inline）、行内区块 （inline-block）、表格单元格 （table-cell）盒子的垂直对齐方式。

最关键的一句话请记住：

💡 vertical-align 只对行内元素、行内块元素和表格单元格元素生效，不能用它垂直对齐块级元素。

这也是很多初学者的误区：给一个 <div> 设置 vertical-align: middle，期望它在父容器中垂直居中------结果是没有任何效果 。因为 <div> 是块级元素，不在 vertical-align 的作用范围内。

如果想让块级元素在父容器中垂直居中，现代 CSS 推荐使用 Flexbox 或 Grid 布局。

二、常用取值

vertical-align 的取值分为三类：相对父元素的值、相对整行的值、以及专门用于表格单元格的值。

1. 相对父元素的值

取值	作用
`baseline`	默认值，元素的基线与父元素的基线对齐
`middle`	元素的中部与父元素的基线加上父元素 x-height 的一半对齐
`text-top`	元素的顶部与父元素文字的顶部对齐
`text-bottom`	元素的底部与父元素文字的底部对齐
`sub`	元素的基线与父元素的下标基线对齐
`super`	元素的基线与父元素的上标基线对齐

2. 相对整行的值

取值	作用
`top`	元素及其后代元素的顶部与整行的顶部对齐
`bottom`	元素及其后代元素的底部与整行的底部对齐

3. 表格单元格专用值

取值	作用
`top`	单元格内边距的上边缘与该行顶部对齐
`middle`	单元格内边距盒模型在该行内居中对齐
`bottom`	单元格内边距的下边缘与该行底部对齐

此外还支持 <length>（如 4px）和 <percentage>（相对于 line-height 的百分比）进行精细调整，允许负值。

三、经典场景一：表格单元格内容的垂直对齐

在学习 HTML 的 <table> 标签时，<td> 有一个 valign 属性用于控制单元格内容的垂直对齐。但在 CSS 中，我们用 vertical-align 来实现同样的效果。

示例代码

html 复制代码

<style>
    table {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        border-collapse: collapse;
        text-align: center;
    }
    tr, td {
        border: 1px solid red;
        /* 设置单元格内容垂直对齐方式 */
        vertical-align: middle;
    }
</style>

<table>
    <tr>
        <td>东</td>
        <td>西</td>
    </tr>
    <tr>
        <td>南</td>
        <td>北</td>
    </tr>
</table>

在这个例子中，td 设置了 vertical-align: middle，所以每个单元格中的文字都会在单元格内垂直居中 显示。你可以把 middle 换成top 或 bottom，观察内容贴向单元格顶部或底部的效果。

四、经典场景二：图片与文字的垂直对齐

vertical-align 另一个非常实用的场景，就是控制图片与相邻文字的垂直对齐方式。

示例代码

html 复制代码

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    img {
        /* 设置垂直对齐方式，其实设置的是文字和该图片的对齐方式 */
        vertical-align: middle;
    }
</style>

<div class="box1">
    <img src="./images/1.webp" alt="">
    好好学习
</div>

这里给 <img> 设置 vertical-align: middle，图片就会与旁边的文字"好好学习"在垂直方向上居中对齐。

⚠️ 图片底部空白缝隙问题

如果你曾经遇到过图片底部出现一段莫名其妙的空白缝隙，那正是因为：

图片默认是 inline-block 元素，其基线与父元素基线对齐，而父元素基线通常位于文本底部（字母 x 的下边缘），导致图片下方留白。

解决方案有两种：

给图片设置 vertical-align（推荐）：

css 复制代码

img {
    vertical-align: middle; /* 或 top / bottom */
}

2. 将图片转换为块级元素：

css 复制代码

img {
    display: block;
}

五、常见误区总结

❌ 误区 1 ：vertical-align: middle 可以让任意 <div> 在父容器中垂直居中。

✅ 真相：块级元素不受 vertical-align 影响，请使用 Flexbox：

css 复制代码

.parent {
    display: flex;
    align-items: center;
}

❌ 误区 2 ：vertical-align 只能用于表格。

✅ 真相：它也适用于行内元素和行内块元素，最典型的就是图片与文字对齐 。

❌ 误区 3 ：vertical-align 的取值只有 top、middle、bottom。

✅ 真相：还有 baseline（默认）、text-top、text-bottom、sub、super，以及长度值和百分比值，可实现更精细的控制。

六、最佳实践建议

表格单元格内容对齐 → 在 td 上使用 vertical-align: top / middle / bottom
图片与文字对齐 → 在 img 上使用 vertical-align: middle（或 top / bottom）
块级元素垂直居中 → 放弃 vertical-align，改用 Flexbox 或 Grid
图文排版出现底部空隙 → 给图片加 vertical-align: middle 或设为 display: block

掌握 vertical-align 的关键在于理解它的作用范围：它只服务于行内世界和表格单元格，而不是用来做任意元素的垂直居中。用对场景，它就是一把利器；用错场景，它只会让你困惑。

读者互动：

如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
如果觉得文章有帮助，欢迎点赞鼓励。
想与我共同进步，欢迎关注我。

💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉