HTML5中align属性已被彻底移除，必须用CSS的text-align和vertical-align实现单元格对齐；text-align作用于行内内容，需设在td/th上；vertical-align仅对table-cell和行内元素有效，推荐用flex布局实现可靠垂直居中。
HTML表格单元格对齐必须用CSS，align属性已废弃
直接说结论：align 属性在 HTML5 中**不是“不推荐”，而是被标准彻底移除**。即使浏览器仍能解析 <td align="center">，它也属于无效标记，在 W3C 验证器中报错，邮件客户端（如 Outlook）和部分 WebView（尤其 Android 旧版）行为不可靠，且无法通过无障碍工具正确传达语义。
常见错误现象：本地开发时看着居中，上线后突然左对齐；或加了 !important 的 text-align: center 仍被忽略——大概率是 HTML 里残留了 align 属性，触发了某些渲染引擎的旧逻辑优先级。
-
align和valign在<table>、<tr>、<td>、<th>上全部废弃，无例外 - 浏览器兼容性 ≠ 标准合规性。它们能“工作”，不代表该用
- 若项目需支持 IE8 或老旧邮件模板，应单独处理，而非当作通用方案
text-align 控制水平对齐，但只对行内内容生效
text-align 是唯一标准、可预测的水平对齐方式，但它作用对象是“块容器内的行内内容”，不是“让这个单元格自己居中”。写错位置，样式就完全不体现。
- ✅ 正确：加在
<td>或<th>上 ——<td style="text-align: right;">金额</td> - ❌ 无效：加在
<tr>上试图批量控制（除非配合后代选择器） - ❌ 无效：加在
<table>上期望继承到所有td——text-align不继承自table元素 - ⚠️ 注意：如果
<td>里放了<div>（display: block），text-align: center只影响其内部文字，不居中这个div本身；需额外给div设margin: 0 auto或display: inline-block
vertical-align 控制垂直对齐，但作用域常被误解
vertical-align 只对 display: table-cell（即默认的 td/th）和行内元素有效。它不是“把内容在单元格里上下居中”，而是“把内容的基线/顶部/底部对齐到当前行的对应位置”。父行高度未约束时，效果常与预期不符。
立即学习“前端免费学习笔记（深入）”；
- ✅ 稳定取值只有
top、middle、bottom；baseline行为复杂，慎用 - ⚠️
vertical-align: middle生效前提是<tr>有足够高度 —— 若行高由内容撑开，且内容只有一行，可能看不出“居中”效果 - ⚠️ 单元格含图片时，
vertical-align作用于图片盒模型整体，不是图片内部像素；若图片设了display: block，vertical-align失效 - ? 真正需要强控制垂直居中（比如多行文本+图标混合），建议用
display: flex替代：<td style="display: flex; align-items: center;">...，但注意这会破坏表格语义，仅限局部优化
全局设置单元格对齐，用 CSS 类比内联样式更可靠
想统一整张表或某几列的对齐方式，硬编码每个 td 的 style 属性既冗余又难维护。CSS 类 + 合理选择器才是工程化做法。
- 整表统一：
table.data td, table.data th { text-align: left; vertical-align: top; } - 指定列：
<col class="numeric">+col.numeric { text-align: right; }（注意：col只支持text-align，不支持vertical-align） - 响应式场景：用媒体查询覆盖对齐，例如小屏时
td.name { text-align: center; }，大屏恢复左对齐 - 避免滥用
!important—— 它掩盖的是选择器权重问题，比如父级<div class="report">设了text-align: left，而你忘了加更具体的选择器去覆盖
真正麻烦的从来不是“怎么写对齐”，而是“为什么写了没反应”——多数时候卡在 text-align 的作用对象理解偏差、vertical-align 的行高依赖，或 HTML 里残留的废弃 align 属性干扰了 CSS 层叠顺序。
