text-align必须加在<td>或<th>上才生效，因它控制块级容器内行内内容的水平对齐；<table>和<tr>不直接渲染文本，仅设其上不可靠，且易被废弃的align属性覆盖。
text-align 该加在哪个标签上才生效
必须加在 <td> 或 <th> 上，而不是 <table> 或 <tr> —— 因为 text-align 控制的是**块级容器内行内内容的水平对齐**，而 <table> 和 <tr> 本身不直接渲染文本，只是布局容器。
常见错误是写 table { text-align: center; }，以为能影响所有单元格——它确实会继承，但很多浏览器（尤其旧版 WebView、Outlook）不保证继承行为稳定；更稳妥的做法是显式写 td, th { text-align: center; }。
-
<td style="text-align: right">：单个单元格右对齐，优先级最高 -
th { text-align: center; }：所有表头居中，不影响数据行 -
td:nth-child(3) { text-align: right; }：第三列全部右对齐（适合金额） - 避免写
table { text-align: center; }单独依赖继承，尤其在邮件或混合渲染环境里容易失效
为什么写了 text-align 还没居中
大概率是被 HTML 的 align 属性覆盖了——虽然 align 在 HTML5 中已废弃，但在 Android WebView、Outlook、某些邮件客户端里仍优先解析，且会无视 CSS 的 text-align。
比如：<td align="left">内容</td> 出现在代码里，哪怕你写了 td { text-align: center !important; }，某些环境照样按 align="left" 渲染。
立即学习“前端免费学习笔记（深入）”；
- 检查源码是否残留
align="..."属性，删干净 - 如果必须兼容老旧邮件模板，用内联样式 +
!important（但仅限必要场景）：<td style="text-align: center !important"> - 不要指望
text-align对图片起作用——除非图片是行内元素（display: inline），否则需配合margin: auto或 flex
text-align 和 vertical-align 是两回事
text-align 只管水平方向（左/中/右），和垂直对齐完全无关；想让文字在单元格里上下居中，必须另配 vertical-align: middle，而且它只对 <td> 和 <th> 有效。
很多人误以为设了 text-align: center 就“居中”了，结果发现文字贴着单元格顶部——那是因为缺了 vertical-align。
- 正确组合：
td { text-align: center; vertical-align: middle; } -
vertical-align不继承，不能只写在table上，必须作用于td或th - 别写
table { vertical-align: middle; }—— 这个声明无效 - 如果单元格里有换行文本或图标，
vertical-align: middle依然可靠；但遇到height设死又内容超高的情况，可能需要额外line-height或 flex 补救
表格整体居中不是靠 text-align
想让整个表格在页面里水平居中？别碰 text-align，它控制不了表格自身位置。那是 margin 的事。
text-align 加在 <table> 上，最多影响内部文字继承（不可靠），绝不会让表格块在父容器里居中。
- 正确写法：
<table style="margin: 0 auto;"> - 如果父容器是 flex 布局，也可以用
justify-content: center，但注意 table 默认是块级，无需额外display: block - 别用已废弃的
<table align="center">，Chrome/Firefox/Safari 已不保证解析一致，W3C 验证器直接报错 - 响应式场景下，
margin: 0 auto配合max-width更安全，避免小屏溢出
真正麻烦的从来不是写一行 text-align: center，而是搞清它在哪起作用、被谁覆盖、和什么搭配才完整。尤其是跨客户端渲染时，HTML 属性残留和继承链断裂比想象中更常见。
