text-align仅对块级容器及其内部行内内容生效，不能直接居中行内元素或块级子元素；需通过父容器设置、display转换或flex/grid布局实现居中。
text-align 用在块级元素上才生效
很多人给 <span></span> 或 <a></a> 这类行内元素直接加 text-align: center，发现没反应——因为 text-align 只作用于**包含它的块级容器**，控制的是“它里面的内容”怎么对齐。
- 正确做法：给父级
<div>、<code><p></p>、<header></header>等块级元素设text-align - 如果非要让单个行内元素居中，得先让它变成块级或弹性容器，比如加
display: block或display: inline-block再配合text-align（但更推荐用flex） -
text-align对表格单元格（<td>、<code><th>）也有效，但对 <code><table> 本身无效 <h3>text-align: center 不等于水平居中所有场景</h3> <p>它只让**行内内容**（文字、图片、inline-box）在行框内居中，对块级子元素完全无效。比如一个 <code><div> 里放了另一个 <code><div>，哪怕父级设了 <code>text-align: center，子<div> 依然左对齐。 <ul> <li>想居中块级元素？用 <code>margin: 0 auto（需有明确宽度）或display: flex; justify-content: center - 想居中文本+图片混合内容？
text-align没问题；但图片默认是基线对齐，可能看起来“偏下”，可加vertical-align: middle - 多行文本用
text-align: justify时，最后一行默认左对齐，如需拉伸可用text-align-last: justify（注意 Safari 支持较晚）
text-align 在 flex 或 grid 容器里被忽略
一旦父元素设了 display: flex 或 display: grid，text-align 就失效了——因为对齐逻辑已交给 justify-content、align-items 等属性接管。
- 常见误操作：给 flex 容器同时写
text-align: center和justify-content: center，前者纯属冗余 - 例外：如果 flex 项目内部还有文字，那项目自身的
text-align仍对其内部文字有效 - 表格布局（
display: table-cell）仍尊重text-align，这点和 flex 不同
RTL 语言和 text-align 的隐含影响
text-align: start 和 text-align: end 是比 left/right 更健壮的选择，尤其面对阿拉伯语、希伯来语等从右向左书写的语言时。
立即学习“前端免费学习笔记（深入）”；
-
start始终指向当前书写方向的起始侧（LTR 是左，RTL 是右） - 用
left/right在 RTL 页面中容易导致意外翻转，比如导航栏按钮顺序错乱 - 现代框架（如 Bootstrap 5+）已倾向用
text-start/text-end类替代text-left/text-right
真正容易被忽略的是：当父元素用了 direction: rtl，即使你写了 text-align: left，它也会表现成“右对齐”——因为 left 是相对于书写方向而言的，不是绝对屏幕方向。调试时别只盯 CSS，顺手检查 direction 和 unicode-bidi。
