CSS中text-align和vertical-align的对齐方式区别

text-align 控制块级元素内文本或内联元素的水平对齐，常用值有 left、right、center、justify；vertical-align 控制行内元素或表格单元格内容的垂直对齐，常用值包括 top、middle、bottom、baseline；两者不互替且适用范围不同，复杂对齐应结合 flex 或 grid 布局。

text-align 和 vertical-align 是 CSS 中常用来控制对齐方式的两个属性，但它们的作用对象和使用场景完全不同。简单来说，text-align 控制的是文本或内联元素的水平对齐方式，而 vertical-align 则用于控制行内元素或表格单元格内容的垂直对齐。

下面我们就从几个常见用途出发，看看它们到底有什么区别、什么时候该用哪个。

---

text-align：控制水平对齐

text-align 主要用于设置块级元素内部文本或内联元素的水平对齐方式。它通常作用在父容器上，影响其所有子元素（特别是文本内容）的对齐。

立即学习“前端免费学习笔记（深入）”；

常用值包括：

• left：左对齐（默认）
• right：右对齐
• center：居中对齐
• justify：两端对齐

比如你写一个 div 包含几段文字，默认是靠左对齐的。如果你希望这些文字都居中显示，就可以这样设置：

.container {
text-align: center;
}

需要注意的是，text-align 并不会影响块级子元素本身的对齐，除非它们是内联上下文的一部分，例如 或者设置了 display: inline-block 的元素。

---

vertical-align：控制垂直对齐

vertical-align 看起来像是用来做垂直居中的，但它其实只能作用于行内元素或表格单元格的内容。常见的使用场景包括图片和文本对齐、多个 inline-block 元素之间的对齐等。

常用值有：

• top
• middle
• bottom
• baseline（默认）

比如你想让一张图片和旁边的文本垂直居中对齐，可以这样写：

img {
vertical-align: middle;
}

但如果你想用它来实现一个 div 内容整体垂直居中，那就不合适了。这时候应该考虑 flex 或 grid 布局。

---

使用时容易混淆的点

很多人会误以为这两个属性能互相替代，或者能在任何布局中使用。实际上要注意几点：

• text-align 是针对水平方向的，vertical-align 是针对垂直方向的
• 它们都不是万能对齐工具，各自有适用范围
• vertical-align 只对 inline、inline-block、table-cell 类型的元素有效
• 要实现复杂的对齐效果，建议结合 flex 或 grid 布局

举个例子：

如果你有一个 div 容器，想让里面的文字既水平又垂直居中，光靠 text-align 和 vertical-align 是不够的。这时候可以这样处理：

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

---

基本上就这些。text-align 和 vertical-align 各司其职，理解它们的适用范围，才能在不同布局需求下正确选择。