标签无法控制垂直对齐，真正生效的是或上的vertical-align属性；若需精确控制，推荐在上使用display: flex配合align-items。
tr 标签本身不能直接控制垂直对齐层次
很多人误以为给 <tr> 加 <code>valign 或 vertical-align 就能控制行内内容的垂直位置，但这是错的。HTML5 已废弃 <tr> 的 <code>valign 属性，且 CSS 中 vertical-align 对 <tr> 无效——因为 <code><tr> 不是 table-cell 类型，它不参与单元格级对齐计算。
<h3>真正起作用的是 td/th 元素上的 vertical-align</h3>
<p>垂直对齐效果最终由每个单元格（<code><td> 或 <code><th>）决定，且优先级高于其父级 <code><tr> 的任何尝试设置：
<ul><li>
<code>vertical-align: top、middle、bottom 必须写在 <td> 或 <code><th> 上才生效
<li>如果某 <code><td> 设了 <code>vertical-align: bottom，而它所在的 <tr> 也写了 <code>style="vertical-align: middle"，后者会被忽略
vertical-align: middle 配合固定 height 和 line-height 最稳定；若含多行或块级元素，需额外处理当 vertical-align 不生效时的常见原因
不是代码写错了，而是隐含条件没满足：
- 单元格未设置明确高度（
height或min-height），导致vertical-align: middle缺少参照基准 - 单元格内嵌套了
<div>、<code><p></p>等块级元素，默认 display 是 block，会破坏 table-cell 的对齐上下文 - 父级
<table> 设置了 <code>border-collapse: collapse，但没配border-spacing: 0，有时引发渲染偏差 - 使用了 flex 或 grid 布局强行包裹单元格内容，覆盖了原生 table-cell 行为
- 避免同时用
vertical-align和align-items，二者冲突 - 若要兼容 IE11，需加
-ms-flex-align: center前缀
更可控的现代替代方案：flex 布局嵌入 td
如果需要精确控制复杂内容（比如图标+文字+按钮）在单元格内的垂直位置，直接在 <td> 上启用 flex 更可靠：
<pre class="brush:php;toolbar:false;"><td style="display: flex; align-items: center; padding: 8px;">
<span>状态</span>
<button>操作</button>
</td></pre>
<p>注意点：</p>
<ul>
<li>必须显式设 <code>display: flex，否则 align-items 无效
真正要调“每一行数据的垂直显示层次”，本质是调每行中每个单元格的内容定位逻辑——不是行本身，而是它的子单元格。别在 <tr> 上浪费时间试各种 height 或 valign，盯住 <code><td> 才是正解。</td>
