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 并不会影响块级子元素本身的对齐，除非它们是内联上下文的一部分，例如 <span> 或者设置了 display: inline-block 的元素。
vertical-align：控制垂直对齐
vertical-align 看起来像是用来做垂直居中的，但它其实只能作用于行内元素或表格单元格的内容。常见的使用场景包括图片和文本对齐、多个 inline-block 元素之间的对齐等。
常用值有：
topmiddlebottom-
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 各司其职，理解它们的适用范围，才能在不同布局需求下正确选择。
