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

关注

原创最新推荐文章于 2026-10-25 09:25:10 发布 422 阅读 AI 写同款· GEO 优化 ›

[css] 使用Flexbox实现多尺寸字体完美基线对齐本文详细介绍了如何使用CSS Flexbox的`align-items: baseline`属性实现多尺寸字体的完美基线对齐。通过电商价格标签等实际案例，解析了Flexbox基线对齐的原理、进阶技巧及常见问题排查方法，帮助开发者解决混合字号文本的视觉对齐难题，提升页面排版的专业性。阅读详情

在 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 来实现同样的效果。

示例代码

<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 另一个非常实用的场景，就是控制图片与相邻文字的垂直对齐方式。

示例代码

<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（推荐）：

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

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

img {
    display: block;
}

五、常见误区总结

❌ 误区 1：vertical-align: middle 可以让任意 <div> 在父容器中垂直居中。
✅ 真相：块级元素不受 vertical-align 影响，请使用 Flexbox：

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

❌ 误区 2：vertical-align 只能用于表格。
✅ 真相：它也适用于行内元素和行内块元素，最典型的就是图片与文字对齐。
❌ 误区 3：vertical-align 的取值只有 top、middle、bottom。
✅ 真相：还有 baseline（默认）、text-top、text-bottom、sub、super，以及长度值和百分比值，可实现更精细的控制。