text-align合法取值包括基础值left、right、center、justify、inherit，以及CSS逻辑属性新增的start、end、match-parent；其中inherit不支持IE全版本，start/end需配合direction使用且旧版Safari兼容性有限。
text-align 的合法取值有哪些
text-align 是 CSS1 就支持的原生属性，所有现代浏览器（包括 IE6+）都支持以下基础值：left、right、center、justify 和 inherit。其中 inherit 在所有版本 IE 中均不支持。
从 CSS Logical Properties 开始，还新增了逻辑值：start、end（推荐用于多语言/响应式场景），以及 match-parent（较少用）。但注意：start/end 在旧版 Safari（≤12.1）和部分安卓 WebView 中兼容性有限。
justify 为什么经常“看起来没生效”
两端对齐不是简单拉伸——它依赖**足够长的文本行 + 合理容器宽度**才能触发间距调整。常见失效原因：
- 容器太宽或文本太短（单行就撑满），浏览器无须拉伸，直接按
left渲染最后一行 - 设置了
letter-spacing或word-spacing，会覆盖justify的自动间距调节能力 - 中文段落缺乏空格分隔，部分浏览器（尤其旧版 Chrome）对中文字间拉伸支持弱，需配合
text-justify: inter-ideograph（仅 IE/Edge 支持） - 未限制容器宽度（如
width: auto在display: inline-block下可能收缩），导致无“两端”可对齐
实测建议：给元素加 width: 300px + border 边框，肉眼观察是否真正贴边。
立即学习“前端免费学习笔记（深入）”；
left / right / center 的实际作用对象是谁
text-align **只影响块级容器内的行内内容**，不是让容器自己居中。典型误解：
-
div { text-align: center; }→ 让 div 里的文字、span、img居中，但 div 本身仍在父容器左上角 - 想让 div 自身水平居中？得用
margin: 0 auto（需有明确 width）或 Flex/Grid - 对
display: block子元素（如另一个div）无效，除非子元素是inline-block或inline
也就是说：它管“内容怎么排”，不管“盒子怎么摆”。
多语言场景下该用 left 还是 start
如果你的网站要支持阿拉伯语（RTL）、希伯来语或中文混排，硬写 text-align: left 会导致 RTL 文本反向错乱。此时应优先用逻辑值：
-
text-align: start→ 在 LTR（如中文、英文）下等价于left，在 RTL（如阿拉伯文）下自动变为right -
text-align: end→ 反之，适合作为右对齐签名、日期等固定位置内容 - 需搭配
direction: rtl或dir="rtl"HTML 属性才能正确触发逻辑行为
真实项目中，只要用了 dir 属性，start/end 就比物理值更可靠；否则，老老实实用 left/right 更稳妥。
真正难的不是记住取值，而是理解 text-align 本质是「行框对齐点控制」——它不改变盒模型，也不影响布局流，只悄悄调整每一行里字符与空格的分布。一旦容器、文本、书写模式三者关系没理清，就容易反复调试却看不出效果。
