valign属性在现代HTML中已失效，HTML5将其标记为obsolete，Chrome/Firefox/Edge 90+等浏览器默认忽略；应改用CSS的vertical-align（仅对td/th有效）或Flex布局（display: flex; align-items: center）实现垂直对齐。
valign 属性在现代 HTML 中已经失效，不建议使用。它早在 HTML5 中就被标记为 obsolete（废弃），所有主流浏览器（Chrome/Firefox/Edge 90+）默认忽略它，哪怕你写了 <td valign="middle">，实际效果也完全不可控。
valign 为什么写上去没反应？
- 浏览器解析时直接跳过该属性，尤其当表格或单元格上存在任何 CSS（比如
vertical-align、display: flex、line-height或全局td { vertical-align: top }）时，valign更是彻底被覆盖 - 它只作用于“行内上下文对齐”，不是真正的单元格内垂直居中；多行文本、图文混排时行为完全不可预测
-
<tr valign="middle">和<caption valign="top">同样被废弃，且现代浏览器根本不识别
常见错误现象：
- 写了
valign="middle"，内容还是顶部贴边 - 在 Vue/React 动态渲染的表格里，
valign完全不生效 - 开发者误以为是自己拼写错了（其实是根本不用管拼写——它压根不运行）
替代方案：用 vertical-align CSS 属性
这是 W3C 标准、浏览器稳定支持、且真正生效的方式，仅需作用于 td 或 th 元素：
-
vertical-align: top→ 等效旧valign="top" -
vertical-align: middle→ 等效旧valign="middle"（但注意：它对齐的是行框中线，不是内容盒中心） -
vertical-align: bottom→ 等效旧valign="bottom" -
vertical-align: baseline→ 适合多行文本+图标混合场景
关键前提：
立即学习“前端免费学习笔记（深入）”；
- 必须确保单元格有足够高度（否则“居中”不可见），可设
height或min-height - 不要给
td内部的div或p直接设vertical-align—— 默认无效，除非加display: inline-block
示例（推荐写法）：
<td style="vertical-align: middle; min-height: 48px;">✅ 已处理</td>
复杂内容必须居中？用 Flex 布局兜底
当单元格里有按钮、图标、多段文字、甚至带 margin/padding 的子元素时，vertical-align 会失灵——因为它不控制子元素布局，只影响行内盒位置。
这时最可靠的做法是：
- 给
td加display: flex - 配合
align-items: center（垂直）和justify-content: center（水平） - 显式设置
min-height（如min-height: 60px），避免高度塌陷
示例：
<td style="display: flex; align-items: center; min-height: 60px;"><span>审核中</span><img src="icon.svg" alt="" style="margin-left: 8px;"></td>
IE11 需加 -ms- 前缀，但基础对齐仍可用；现代项目基本无需兼容 IE。
真正容易被忽略的点：表格行高由内容撑开时，“middle”几乎看不见。哪怕写了 vertical-align: middle，如果整行就一行文字、没设高度、也没 padding，那单元格实际高度 ≈ 行高（比如 20px），中间位置和顶部差不了几个像素——这不是 bug，是设计使然。解决方法只有两个：设高度，或加 padding。
