valign 属性在 HTML5 中已废弃，应改用 CSS 的 vertical-align（单行文本）或 flex 布局（复杂内容），因其违反语义化、不响应式且 W3C 验证报错。
valign 属性在 <td> 中已失效 —— 它是 HTML 4 的废弃属性，现代浏览器虽仍能解析（出于兼容性），但不推荐使用，且在 HTML5 中完全不合法。
为什么 valign 不该再用
HTML5 标准移除了所有表现型属性，valign 就是典型代表。它混杂结构与样式，违背语义化原则；更重要的是，它无法响应式控制、不支持 flex/grid 布局、不能被 CSS 选择器覆盖或继承。
- W3C 验证器会报错：
Attribute valign is obsolete. Use CSS instead. - 在
<table>嵌套<div>或使用display: grid改写表格时，valign彻底失效 - IE8+ 虽支持，但 Safari 和 Chrome 对
valign="bottom"在百分比高度单元格中行为不一致
CSS 替代方案：对齐单行文本最简方式
对纯文本内容的 <td>，用 vertical-align 是最直接等效替代。注意：它只对 table-cell（即默认 <td>）、inline、inline-block 元素生效。
-
vertical-align: top≈valign="top" -
vertical-align: middle≈valign="middle" -
vertical-align: bottom≈valign="bottom" - 若需基线对齐（如含图标+文字），可用
vertical-align: baseline，这是valign没有的能力
示例：
立即学习“前端免费学习笔记（深入）”；
<td style="vertical-align: middle;">居中文字</td>
复杂内容（多行/块级元素）怎么垂直居中
当 <td> 里有 <div>、<img> 或多段落时，vertical-align 会失效（因它只对“行内盒”起作用）。此时必须靠父容器（<td>）的布局能力：
- 设
<td>为display: flex，再用align-items: center—— 简洁可靠，IE11+ 支持 - 若需兼容老 IE，可加
line-height匹配height（仅限单行文本） - 避免用
position: absolute+transform: translateY(-50%)，它破坏表格单元格的自动高度计算
示例（flex 方案）：
<td style="display: flex; align-items: center; height: 80px;"> <div>任意高度内容</div> </td>
容易被忽略的关键点
vertical-align 的值不是相对于整个单元格，而是相对于“行框（line box）”的基线——这意味着如果单元格里有不同字号或行高的内容，middle 可能看起来偏高或偏低；flex 方案虽强，但一旦给 <table> 设了 border-collapse: collapse，又没处理 padding，视觉对齐仍可能错位。
