text-align 只对块级元素（如、、）和表格单元格（、）生效，控制其内部行内内容的水平对齐；对行内元素（如、）无效。
text-align 该用在哪个元素上才生效
text-align 只对块级元素（如 <p></p>、<div>、<code><h1></h1>）和表格单元格（<td>、<code><th>）起作用，对行内元素（如 <code><span></span>、<a></a>）设了也没用——它控制的是“内部行内内容的对齐”，不是自己怎么摆。
常见错误现象：<span style="text-align: center">文字</span> 完全没反应；实际得包一层 <div> 或直接用在父容器上。
<ul>
<li>正确做法：把 <code>text-align 加在包含文本的块容器上，比如 <div style="text-align: right"><p>段落</p></div>
<td> 上，<code><td style="text-align: justify"> 是合法且常用的
<li>Flex 布局下 <code>text-align 依然有效，但仅影响其内部的文本流，不影响 flex item 的排列（那是 justify-content 的事）left / right / center / justify 四个值的实际表现差异
四个值看着简单，但 justify 在中文场景下基本等于“摆烂”：它靠拉伸空格实现两端对齐，而中文几乎不依赖空格分词，结果就是字挨得极紧，末行还常常左对齐，视觉上反而难看。
立即学习“前端免费学习笔记（深入）”；
使用场景判断：
-
text-align: left是默认值，不用显式写；适合绝大多数阅读场景 -
text-align: center常用于标题、按钮文字，注意别滥用——长段落居中会显著降低可读性 -
text-align: right多用于数字列（金额、编号）、RTL 语言（阿拉伯语、希伯来语），中文右对齐极少单独用 -
text-align: justify在英文 PDF 导出或印刷排版里有意义，网页中慎用；若真要模拟，得配合text-justify: inter-word（支持度有限）
inline-block 元素里的文本对齐容易被忽略的细节
当容器里放了一堆 display: inline-block 的盒子（比如导航菜单项），想让它们整体居中，只给父容器设 text-align: center 是对的；但子元素如果本身是块级，又没设宽度，就可能撑满一行，导致对齐失效。
关键点：
- 父容器必须有明确的
text-align，子元素保持inline-block即可响应 - 子元素不要设
width: 100%或浮动，否则会脱离文本流，text-align失效 - 行高、字体大小不一致时，
inline-block元素底部默认按基线对齐，看起来像“没居中”，这时加vertical-align: top更稳
CSS 优先级和继承带来的意外覆盖
text-align 是可继承属性，所以父元素设了 text-align: right，所有后代文字都会右对齐——除非被更具体的规则覆盖。很多人调试时发现“明明写了 text-align: left，文字还是右的”，八成是祖先元素的样式漏看了。
排查建议：
- 用浏览器开发者工具检查计算样式（Computed），看
text-align最终值来自哪条规则 - 注意
!important的滥用，尤其第三方 UI 库（如 Ant Design）常带全局text-align重置 - 组件化开发中，避免在根容器（如
App）上设text-align，改用局部类名控制更安全
真正麻烦的从来不是写对 text-align，而是它悄无声息地从父层漏下来，又和 flex、grid、float 混在一起，让对齐行为变得不可预测。动手前先看一眼父元素的 computed 样式，比反复试更省时间。
