css文本对齐text-align与vertical-align使用

text-align 用于块级元素内行内容的水平对齐，如文字居中；vertical-align 用于行内元素或表格单元格的垂直对齐，如图文对齐。两者作用对象不同，不可混淆。

text-align 和 vertical-align 是 CSS 中常被混淆的两个属性，它们都涉及“对齐”，但作用对象和使用场景完全不同。下面分别说明它们的用途、取值和常见用法。

text-align：控制文本的水平对齐方式

text-align 用于设置**块级元素内行内内容的水平对齐方式**，比如文字、图片等在容器中的左右或居中排列。

它适用于块级元素（如 div、p、h1~h6），不能用于控制单个行内元素自身的位置。

常用取值包括：

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

• left：左对齐（默认）
• center：居中对齐
• right：右对齐
• justify：两端对齐（使每行文字宽度一致，常用于段落排版）

示例：

div {
  text-align: center;
}

这个设置会让 div 里的文字、图片等内容在 div 内部水平居中显示。

vertical-align：控制行内或表格单元格内容的垂直对齐

vertical-align 用于设置**行内元素或表格单元格内容在垂直方向上的对齐方式**。它最常用于：

Text Mark

处理文本内容的AI助手

49

查看详情

• 图片与文字的对齐（如 img 与 span 并排时）
• 表格单元格（td/th）中内容的上下对齐
• 使用 display: table-cell 的元素

注意：vertical-align 对块级元素无效，也不能用来垂直居中一个块级盒子本身（比如让一个 div 在页面中间竖直居中）。

常见取值有：

• baseline：基线对齐（默认）
• top：顶部对齐
• middle：居中对齐
• bottom：底部对齐
• text-top / text-bottom：相对于文字的顶部/底部
• sub / super：下标/上标（类似 math 效果）

示例：

img {
  vertical-align: middle;
}

这能让图片和旁边的文本在垂直方向上居中对齐，避免出现图文错位的情况。

常见误区与使用建议

很多人误以为 vertical-align 可以让一个 div 垂直居中于父容器，这是错误的理解。要实现块级元素的垂直居中，应使用 flexbox、grid 或 line-height（单行文本）等方法。

关键点总结：

• text-align 控制**水平对齐**，作用于**块级容器内的行内容器**
• vertical-align 控制**垂直对齐**，只对**行内元素、表格单元格**有效
• 两者都不能直接“居中”一个块级盒子本身
• 图文混排时，vertical-align 很实用；排版段落时，text-align 更常用

以上就是css文本对齐text-align与vertical-align使用的详细内容，更多请关注php中文网其它相关文章！