text-align必须加在或上才生效，因它控制块级容器内行内内容的水平对齐；和不直接渲染文本，仅设其上不可靠，且易被废弃的align属性覆盖。
text-align 该加在哪个标签上才生效
必须加在 或 上，而不是 或 —— 因为 text-align 控制的是**块级容器内行内内容的水平对齐**，而 和 本身不直接渲染文本，只是布局容器。常见错误是写 table { text-align: center; }，以为能影响所有单元格——它确实会继承，但很多浏览器（尤其旧版 WebView、Outlook）不保证继承行为稳定；更稳妥的做法是显式写 td, th { text-align: center; }。
：单个单元格右对齐，优先级最高
-
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 { text-align: center !important; }，某些环境照样按 align="left" 渲染。
- 检查源码是否残留
align="..." 属性，删干净
- 如果必须兼容老旧邮件模板，用内联样式 +
!important（但仅限必要场景）：
- 不要指望
text-align 对图片起作用——除非图片是行内元素（display: inline），否则需配合 margin: auto 或 flex
text-align 和 vertical-align 是两回事
text-align 只管水平方向（左/中/右），和垂直对齐完全无关；想让文字在单元格里上下居中，必须另配 vertical-align: middle，而且它只对 和 | 有效。 很多人误以为设了 text-align: center 就“居中”了，结果发现文字贴着单元格顶部——那是因为缺了 vertical-align。
Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
- 正确组合：
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 加在 上，最多影响内部文字继承（不可靠），绝不会让表格块在父容器里居中。- 正确写法：
- 如果父容器是 flex 布局，也可以用
justify-content: center，但注意 table 默认是块级，无需额外 display: block
- 别用已废弃的
，Chrome/Firefox/Safari 已不保证解析一致，W3C 验证器直接报错
- 响应式场景下，
margin: 0 auto 配合 max-width 更安全，避免小屏溢出
真正麻烦的从来不是写一行 text-align: center，而是搞清它在哪起作用、被谁覆盖、和什么搭配才完整。尤其是跨客户端渲染时，HTML 属性残留和继承链断裂比想象中更常见。
| |
|
|
| |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
