text-align必须加在<td>或<th>上才生效，因<table>不渲染文本，<tr>为table-row不参与文本布局；<td align>等HTML属性已废弃，应改用CSS类控制。
text-align 必须加在 <td> 或 <th> 上才生效
直接给 <table> 加 text-align: center 会作用于所有子单元格，但这是“继承”来的效果，不是 <table> 自身控制对齐——它本身不渲染文本。真正起效的节点必须是能容纳文本的块级容器。
常见错误：给 <tr> 设 text-align，结果没反应。因为 <tr> 默认是 display: table-row，不参与文本布局，样式不会向下传递到单元格（除非显式用 td, th 选择器覆盖）。
- ✅ 正确写法：
<td style="text-align: right">金额</td> - ✅ 整列控制：
<col class="amount-col">+.amount-col { text-align: right; } - ❌ 无效写法：
<tr style="text-align: center"><td>内容</td></tr>（多数浏览器忽略）
HTML 的 align 属性已废弃，别再用
align="center" 这类写法在 HTML5 中属于无效标记，W3C 不再保证支持。它可能在 Chrome 或 Firefox 里暂时还能显示，但在 Outlook、Android WebView 或严格模式下极易失效。
更麻烦的是：如果同时存在 <td align="left"> 和 CSS text-align: right，某些旧环境（如部分邮件客户端）会优先认 HTML 属性，导致 CSS 被无视。
立即学习“前端免费学习笔记（深入）”；
- ⚠️ 错误示例：
<td align="center">标题</td> - ✅ 替代方案：
<td class="text-center">标题</td>+.text-center { text-align: center; } - ? 补充：
<table align="center">是另一个概念——它控制表格自身在页面中的水平位置，和单元格内文字对齐无关
为什么 text-align: justify 在中文里基本没用？
浏览器实现 justify 时，只在 Unicode 单词边界（空格、标点等）之间插入额外间距。中文段落几乎无此类分隔符，所以单行或常规多行中文基本不拉伸，最后一行也总是左对齐。
想让它真正起效，得叠加 text-justify: inter-character，但这个属性仅 Chrome/Edge 120+ 支持，Safari 完全不识别，且必须配合明确宽度（如 width: 300px）才有“两端”可言。
- ❌ 白用：
<p style="text-align: justify">这是一段中文文本</p> - ✅ 有条件可用：
<p style="text-align: justify; text-justify: inter-character; width: 400px">这是一段中文文本</p> - ? 提醒：单行文本用
justify没意义——它只在换行后调整各行内部间距
嵌套 <div> 或图片后，text-align 失效怎么办？
text-align 只影响行内内容。一旦单元格里塞了个 <div>（默认 display: block），它就不再被居中，而是按块级元素左贴边渲染。
图片同理：默认是行内元素，text-align: center 能居中；但加了 display: block 后，就得靠 margin: 0 auto 或 Flex 才能居中。
- ✅ 文字居中：
<td style="text-align: center">文字</td> - ✅ 块级元素居中：
<td><div style="margin: 0 auto; width: 200px">内容</div></td> - ✅ 图片居中（行内）：
<td style="text-align: center"><img src="x.jpg"></td> - ✅ 图片居中（块级）：
<td><img src="x.jpg" style="display: block; margin: 0 auto"></td>
vertical-align 对 <td> 有效，对 <div> 无效——后者得用 flex 或 line-height 配合。 
