vertical-align:middle 对单选框和文字无效，因其父容器为 table-cell 且单选框是替换元素、baseline 计算与汉字视觉中心不一致；应直接设在单选框自身并保持行内上下文，或改用 flex 布局（td{display:flex;align-items:center}）更可靠。
vertical-align:middle 为什么对单选框和文字无效
直接给 <input type="radio"> 设置 vertical-align: middle 通常没用，因为它的父容器（比如 <td>）默认是 <code>display: table-cell，而 vertical-align 在这里控制的是单元格内容整体的垂直位置，不是内部行内元素的对齐逻辑。更关键的是：单选框本身是替换元素（replaced element），浏览器对其 baseline 的计算与文字不一致，尤其在中文环境下，middle 实际对齐的是小写字母 x 的中心，不是汉字视觉中心。
真正起作用的 vertical-align 该加在哪儿
必须把 vertical-align 加在单选框自身上，并确保它处于行内上下文 —— 即它不能被包裹在块级元素里（如 <p></p>、<div>），且父容器不能干扰行盒布局。
<ul>
<li>✅ 正确写法：<code><td>
<input type="radio" style="vertical-align: middle;"> 选项文字</td>
<td>
<div><input type="radio" style="vertical-align: middle;"></div> 选项文字</td>（<div> 是块级，打断行内流）
<li>⚠️ 注意：如果文字用了 <code>font-size 明显大于默认值（如 16px 以上），仅靠 vertical-align: middle 仍可能偏高或偏低，需微调常见兼容性坑：Firefox 和旧版 IE 表现不同
Firefox 把 <input type="radio"> 当作图像渲染，遵循图片对齐规则；IE（尤其是 IE8–10）则按表单控件原生基线处理，两者对 vertical-align: middle 的解释存在 1–2px 偏差。
- Firefox 下可补
margin-top: -1px或margin-bottom: 1px微调 - IE 中更可靠的做法是统一用
vertical-align: text-bottom+line-height配合，但会牺牲部分语义一致性 - 现代项目建议忽略 IE，但若需兼容，推荐改用 flex 布局替代（见下一条）
比 vertical-align 更稳的替代方案：flex 布局
当 vertical-align 反复调不准，或者表格结构复杂（比如单元格里有多个单选+文字组合），直接把 <td> 设为 flex 容器最省心。
<pre class="brush:php;toolbar:false;">td {
display: flex;
align-items: center;
}
</pre>
<ul>
<li>不需要关心 baseline 或字体大小影响</li>
<li>自动适配多行文字、图标、甚至带 label 的完整单选组</li>
<li>注意：若 <code><td> 内还有其他块级内容（如 <code><br> 或额外 <div>），需确保它们不破坏 flex 流
<p>真正麻烦的从来不是写一行 <code>vertical-align: middle，而是发现它在某个字号、某款浏览器、某段中文文案下突然错位 1px —— 这时候别硬调，换 flex 就是最快止损方式。
