CSS文本对齐属性不仅限于文本，还适用于块级元素和行内元素的对齐。以下是对齐属性的适用范围说明：text-align：用于设置块级元素（如

、

）中内容的水平对齐方式，也可以用于行内元素（如 、）的水平对齐。vertical-align：主要用于调整行内元素（如 、）在文本中的垂直对齐方式，也可以用于表格单元格中的内容对齐。align-item

CSS中的对齐属性远比表面看起来更精细且上下文敏感：text-align并非“万能居中神器”，它只作用于块级容器内行框中的内联级内容（如文本、图片、inline-block元素），对块级子元素完全无效；真正让块级元素居中需切换布局模式——用margin: 0 auto、Flexbox的justify-content、Grid的justify-items或绝对定位；而vertical-align、align-items、justify-content等则各司其职于不同布局体系（行内、表格、Flex、Grid），一旦父容器采用Flex或Grid，text-align便自动失效。理解每种属性的作用对象和生效前提，才能避免常见误区，写出精准可控的样式代码。

text-align 只对内联内容和表格单元格生效

text-align 不是“让任意元素居中”的万能属性。它的作用对象本质上是**块级容器内的行框（line box）中的内联级内容**，包括文本、、、（作为替换元素）等内联或内联块元素。它不会影响块级子元素的布局位置。

常见误解是给一个 div 设置 text-align: center 后，期望里面所有子 div 都水平居中——这仅在子元素是 display: inline 或 inline-block 时才成立；若子元素是默认 display: block，则完全不受影响。

让块级元素居中该用什么替代 text-align

要真正居中块级子元素，需切换布局上下文：

• 对单个固定宽高的块：用 margin: 0 auto（需设置 width）
• 对弹性子项：父容器设 display: flex + justify-content: center
• 对网格子项：父容器设 display: grid + justify-items: center
• 绝对定位居中：子元素 position: absolute + left: 50% + transform: translateX(-50%)

table-cell 是 text-align 的特例场景

text-align 在 display: table-cell 元素上也有效，且行为一致：控制单元格内**内联内容的水平对齐**。这点常被用来模拟“垂直+水平居中”，但本质仍是作用于单元格内部的行框，不是直接移动单元格本身。

例如：

.cell {
  display: table-cell;
  width: 200px;
  height: 100px;
  text-align: center;     /* 水平居中文字/内联元素 */
  vertical-align: middle; /* 垂直居中（这是 table-cell 自身特性） */
}

flex / grid 容器里 text-align 失效的典型原因

当父元素设为 display: flex 或 display: grid 后，其子元素不再参与常规文档流的行框布局，text-align 就失去作用对象。此时必须用对应布局模型的对齐属性：

• Flex 容器：改用 justify-content（主轴）、align-items（交叉轴）
• Grid 容器：改用 justify-items、align-items 或 justify-self 等
• 不要在 flex 容器上同时写 text-align 和 justify-content 试图“叠加效果”——后者完全主导

最易忽略的是：即使 flex 子项是纯文本，text-align 也不再控制其对齐，因为文本已属于 flex 项目的内容，而非父 flex 容器的“行内内容”。

理论要掌握，实操不能落！以上关于《CSS文本对齐属性不仅限于文本，还适用于块级元素和行内元素的对齐。以下是对齐属性的适用范围说明：text-align：用于设置块级元素（如