text-align 不能解决多行文字错位问题，因其依赖字体等宽性；右对齐数字需用等宽字体或 tabular-nums 特性；vertical-align 对多行文本居中效果有限，应配合固定高度或 flex 布局；推荐用 col 元素统一控制列对齐，避免内联样式；表格居中与单元格内容居中须分层处理。
text-align 不能解决多行文字错位问题
纯靠 text-align: right 对齐数字或带小数点的文本，会因字体非等宽导致小数点上下不对齐——比如 12.34 和 1234.56 右对齐后，小数点实际位置偏移。这不是 bug，是默认字体（如 sans-serif）每个字符宽度不同造成的视觉错位。
常见场景：财务报表、价格列、带单位的数值（如 ¥99.00 / ¥1,234.50）。
- 临时验证可用内联写法：
<td style="text-align: right; font-family: monospace;">¥123.45</td> - 更稳妥做法是统一用等宽字体 + 右对齐：
.numeric { text-align: right; font-family: "Consolas", "Courier New", monospace; } - 若需保留比例字体但又要小数点对齐，得用
tabular-nums字体特性（需字体支持）：font-variant-numeric: tabular-nums;
vertical-align 对多行文字效果有限
vertical-align: middle 在单元格高度未显式设定时，往往“看起来没居中”——因为浏览器按内容自动撑高行高，middle 是相对于该行高计算的，不是相对于整个表格。
真正要让多行文字在单元格里垂直居中，得配合固定高度或 flex 布局：
立即学习“前端免费学习笔记（深入）”；
- 设固定
height+vertical-align: middle（适用于单行为主、偶有多行的场景） - 更可靠的是把
td设为display: flex：td { display: flex; align-items: center; justify-content: flex-start; }（注意：此时text-align失效，水平对齐改用justify-content） - 避免对整张表设
vertical-align—— 它对table标签无效，只作用于td、th、tr
用 col 元素统一控制整列对齐，别堆 inline style
给每行每个 td 写 style="text-align: right" 看似快，但维护成本高、易漏、难复用。现代 HTML 支持 <col> 标签配合 class 控制整列样式，语义清晰且一次生效。
示例：
<table>
<colgroup>
<col class="name">
<col class="price">
</colgroup>
<thead><tr><th>名称</th><th>价格</th></tr></thead>
<tbody><tr><td>苹果</td><td>¥5.80</td></tr></tbody>
</table>
CSS：
.name { text-align: left; }.price { text-align: right; font-family: monospace; }
注意：<col> 必须放在 <table> 内最前面，且不能用 align 属性（已废弃），必须靠 class + CSS 驱动。
表格整体居中 ≠ 单元格内容居中
很多人混淆 <table align="center"> 的作用——它让整个表格在页面中水平居中（类似 margin: 0 auto），和单元格内文字对齐完全无关。而 <td align="center"> 已被 HTML5 废弃，Chrome/Firefox/Safari 不保证渲染一致，W3C 验证器直接报错。
正确分层处理：
- 表格自身居中：
table { margin: 0 auto; } - 表头文字居中：
th { text-align: center; } - 数据行左对齐（默认）或按列定制：
td:nth-child(1) { text-align: left; } - 不要在
table上写text-align——它不渲染文本，无效
真正容易被忽略的点是：对齐逻辑必须分层明确——是容器居中？还是内容居中？还是某类数据特殊对齐？混用旧属性和 CSS 会导致优先级冲突，结果不可控。
