text-align仅作用于当前元素的行内子元素，不影响块级子元素自身位置；它不控制该元素在父容器中的定位，常见误用是试图用它居中block元素。
text-align 只能水平居中行内内容，对块级元素自身无效——这是最常被误解的一点。
text-align 作用对象是谁？
它只影响当前元素的直接子元素中的行内内容（比如文字、<span>、<img>等），不控制该元素自己的位置。所以给一个 <div> 设置 text-align: center，只是让里面文字居中，不是让这个 <div> 在父容器里居中。
常见错误现象：
– 给按钮容器加 text-align: center，以为能让按钮居中，结果按钮确实居中了（因为按钮默认是行内级或行内块）；
– 但换成一个 display: block 的 <div>，就完全没反应。
- 适用场景：段落文字、导航链接、图标+文字组合的水平对齐
- 不适用场景：让整个卡片、表单、模块在页面中居中
- 注意兼容性：
text-align: start/end在老版 IE 中不支持，优先用left/right
为什么给父容器设 text-align 没生效？
往往是因为子元素用了 display: block 且没设置宽度，或者用了 float、position: absolute 脱离了文档流——这些都会让 text-align 失效。
立即学习“前端免费学习笔记（深入）”；
典型错误代码：
.parent { text-align: center; }
.child { display: block; margin: 0 auto; }
这里 .child 是块级，text-align 根本不作用于它；真正起作用的是 margin: 0 auto（前提是它有明确宽度）。
- 检查子元素是否仍处于“参与文本流”的状态
- 如果子元素是
inline-block，text-align有效；如果是block，需配合margin: 0 auto或 Flex 布局 - Flex 替代方案更可控：
display: flex; justify-content: center直接居中子项，不受显示类型限制
text-align 和 direction、writing-mode 的关系
text-align: center 在不同书写方向下行为一致，但 start/end 会随 direction 或 writing-mode 动态变化。比如 direction: rtl 下，text-align: start 实际表现是右对齐。
- 日常开发中，中文项目用
left/center/right更直观，不易出错 - 做国际化时，建议统一用
start/end，避免硬编码方向 -
writing-mode: vertical-rl下，text-align控制的是“垂直方向上的对齐”，容易混淆，慎用
真正麻烦的从来不是写 text-align: center 这一行，而是搞清它到底想居中谁、谁又真的听它的话。
