html表格单元格内容对齐必须用css的text-align控制水平、vertical-align控制垂直，因align和valign在html5中已废弃，现代浏览器渲染不一致且w3c验证报错；二者语义混乱、兼容性差，应彻底弃用。
HTML表格中设置单元格内容对齐，必须用 text-align 控制水平方向、vertical-align 控制垂直方向——align 和 valign 属性在 HTML5 中已废弃，现代浏览器不保证渲染一致，且 W3C 验证器会报错。
为什么 align 和 valign 不能直接写在 HTML 标签里
虽然部分旧代码还能运行（比如 <td align="center" valign="middle">），但问题很实际：
<ul><li>
<code>align 在 <table> 上表示浮动位置，在 <code><td> 上却变成文字对齐，语义冲突
<li>Chrome/Firefox/Safari 对废弃属性的解析行为不统一，尤其在 flex 或 grid 父容器下容易失效</li>
<li>ASP.NET Web Forms 的 <code>HtmlTableCell.Align 是服务器端封装，最终仍输出废弃 HTML，不利于长期维护
text-align 怎么用才不踩坑
它只对含文本的块级或表格单元格元素生效，对 <table> 标签本身无效（因为 <code><table> 不直接渲染文字）：
<ul>
<li>整表所有单元格居中：<code>table td, table th { text-align: center; }
td:nth-child(3), th:nth-child(3) { text-align: right; }
<td style="text-align: left;">文本</td>
<div> 或 <code><img>，text-align 仍作用于其内部行内内容，但不会影响该 <div> 自身的位置
<h3>
<code>vertical-align 垂直居中为什么经常“没反应”
这个属性不是让单元格在表格里上下居中，而是控制“单元格内容在其自身盒高度内”的对齐位置。常见失效原因：
- 未给
td设定明确高度或最小高度，vertical-align: middle缺少参考基准 - 写在
<table> 或 <code><tr> 上无效——它只对 <code><td> 和 <code><th> 生效 <li>单元格内是图片且未设 <code>display: block，默认为行内元素，vertical-align会受基线影响 - 推荐写法：
td, th { vertical-align: middle; min-height: 40px; }，再配合line-height或padding微调视觉居中感
复杂场景下真正容易被忽略的点
当单元格内容是图片、按钮、多行文本或自定义组件时，text-align 和 vertical-align 只管“盒内对齐”，不管“盒本身尺寸”。如果图片没设 height 或父 td 没设 height，vertical-align: middle 就没有可计算的中点。这时候得靠 display: flex 或 display: grid 替代——但那就不是纯表格对齐了，而是布局重构。别指望一个 CSS 属性解决所有嵌套场景。
