text-align仅控制块级元素内部的行内内容对齐，不影响块级子元素自身位置；值包括left、right、center、justify及语义化start/end；失效常见于继承覆盖、元素脱离文本流或误用于flex/Grid容器。
text-align 能控制哪些元素的文本对齐？
text-align 只作用于**块级元素内部的行内内容**（包括文本、、
常见误用：给
设置
text-align: center 后，发现里面的 没动——因为子 是块级元素，默认独占一行，text-align 对它无效；真正居中的只是它内部的文本或行内元素。 - ✅ 有效：对
（含纯文本或 text-align - ❌ 无效：直接靠
text-align 居中一个浮动元素、绝对定位元素或另一个块容器 - ⚠️ 注意：
text-align: justify 在中文下效果有限，因浏览器默认不自动断字，长段落两端对齐常出现过大词间距 text-align 的值有哪些实际表现差异？
text-align 支持 left、right、center、justify 和 start/end（基于 writing-mode）。其中 start 和 end 更健壮，尤其在多语言或 RTL（如阿拉伯语）场景下：
-
left/right 是固定方向，遇到 dir="rtl" 的 仍会左贴左、右贴右，可能违反阅读习惯 -
start 始终对齐当前书写流的起始侧（LTR 下 = left，RTL 下 = right），推荐用于需要国际化支持的项目 -
justify 仅对整行生效（最后一行默认左对齐），如需强制最后一行也拉伸，得加 text-align-last: justify（注意 safari 旧版本不支持） 为什么 text-align 设了却不生效？常见排查点
最常被忽略的是**继承与层叠干扰**。即使父元素设了 text-align: center，子元素也可能被更具体的规则覆盖，或本身有 Float / position: absolute 导致脱离文本流。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被更高优先级样式覆盖：用浏览器开发者工具看
text-align 是否被划掉（strikethrough） - 确认目标元素是块级且未设置
display: inline 或 display: table-cell（后者虽支持 text-align，但行为不同） - 如果内容是单个
![css如何实现文本水平对齐_使用text-align属性控制文本对齐方式]()
display: block（此时它不再受 text-align 影响，需改用 margin: auto 居中） - Flex 容器内，
text-align 失效——该用 justify-content 控制主轴对齐
替代方案：什么时候不该用 text-align？
当目标是让整个块（而非内部文本）水平居中时，text-align 就不是正确工具。比如居中一个带背景色的卡片、按钮或图片容器：
- 块级元素居中：用
margin: 0 auto（需有明确宽度） - Flex 场景：父容器设
display: flex + justify-content: center - Grid 场景：父容器设
display: grid + place-items: center - 绝对定位居中：配合
left: 50% + transform: translateX(-50%)
硬套 text-align: center 到一个空
上，然后往里塞 卡片——那卡片依然靠左，除非卡片自己是行内块或设置了 display: inline-block。