text-align必须加在块级容器（如、、）上才有效，控制其内部行内内容的水平对齐；对行内元素（如）或浮动、绝对定位元素无效，也不能居中块级子元素本身。
text-align 是唯一标准、直接可用的文本水平对齐控制方式，但它只对块级容器内的行内内容起作用——不是“给谁加就让谁对齐”，而是“加在谁身上，就控制它内部文字/图片/行内元素的对齐”。用错地方，样式就完全没反应。
text-align 加在哪个元素上才有效？
必须加在包裹文本的块级元素上，比如 <p></p>、<div>、<code><h2></h2>、<td>。它对纯文本节点、<code><span></span>（默认行内）或未设 display: block 的元素直接设置无效。
- ✅ 正确：
<p style="text-align: center">这段会居中</p> - ❌ 无效：
<span style="text-align: right">这段不会右对齐</span>（除非额外加display: inline-block） - ⚠️ 常见误解：给父
<div> 加 <code>text-align: center，结果里面一个float: left的<div> 还是贴左——因为浮动元素已脱离文档流，<code>text-align管不到它为什么 justify 在中文里看起来没效果？
浏览器默认只在 Unicode “单词分隔符”（如空格、标点）之间拉伸间距，而中文段落几乎没有这类分隔符，所以
text-align: justify对单行或常规中文段落基本不插入字符间隙，最后一行也总是左对齐。- ✅ 要真正生效，需搭配
text-justify: inter-character（Chrome/Edge 120+ 支持） - ⚠️ Safari 完全不支持
text-justify，写了也忽略 - ⚠️ 必须确保容器有明确宽度（如
width或max-width），否则“两端”无从谈起 - ⚠️ 单行文本用
justify没意义——它只在存在换行断点时才调整行内间距
表格单元格（
<td>/<code><th>）对齐要特别注意什么？ <p>表格单元格有自己的对齐逻辑，<code>text-align控制水平，vertical-align控制垂直，但 HTML 属性align仍可能覆盖 CSS——尤其在邮件客户端和旧版 WebView 中。- ✅ 推荐统一用 CSS：
td, th { text-align: right; vertical-align: middle; } - ⚠️ 如果 HTML 中写了
<td align="center">，某些 Android WebView 和 Outlook 会无视 <code>text-align: left !important - ⚠️
text-align不继承自<table>，必须显式写在 <code><td> 或 <code><th> 上，或用后代选择器如 <code>table.data td.num想让整个 div 水平居中，能靠 text-align 吗？
不能。
text-align: center只会让这个<div> 里面的文字居中，而 <code><div> 本身仍在左侧。真要居中块级元素，得用别的方案。 <ul><li>✅ <code>margin: 0 auto：前提是该<div> 有明确宽度（如 <code>width: 400px），且是块级（默认就是） - ✅ Flex 布局：
display: flex; justify-content: center父容器上设置即可 - ⚠️
text-align: center加在父容器上，再放一个display: inline-block的子<div>，也能“曲线救国”，但多一层渲染逻辑，不推荐作为首选 <p>最常被忽略的一点：<code>text-align是可继承属性。一旦在某个祖先元素（比如）上设了text-align: right，所有后代块级元素里的文字都会右对齐——除非你显式重置。别等上线后才发现整站文字都歪了。
- ✅ 要真正生效，需搭配
