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 配合。



















