text-align和vertical-align傻傻分不清？用这招轻松搞定！

还在为CSS中的`text-align`和`vertical-align`对齐方式感到困惑？本文用十分钟带你彻底搞懂这两个属性的区别和用法！`text-align`主要控制块级元素内文本或内联元素的水平对齐，如左对齐、右对齐、居中对齐和两端对齐，而`vertical-align`则专注于行内元素或表格单元格内容的垂直对齐，常用值包括顶部对齐、中部对齐、底部对齐和基线对齐。两者不能互相替代，适用范围也不同。想要实现更复杂的对齐效果？不妨试试强大的Flexbox或Grid布局。本文将通过实例讲解，帮你区分这两个属性，避免混淆，提升你的网页布局技巧，让网页元素对齐不再是难题！

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 各司其职，理解它们的适用范围，才能在不同布局需求下正确选择。

到这里，我们也就讲完了《text-align和vertical-align傻傻分不清？用这招轻松搞定！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,布局,对齐,text-align,vertical-align的知识点！