vertical-align:middle 对单选框和文字无效，因其父容器为 table-cell 且单选框是替换元素、baseline 计算与汉字视觉中心不一致；应直接设在单选框自身并保持行内上下文，或改用 flex 布局（td{display:flex;align-items:center}）更可靠。
vertical-align:middle 为什么对单选框和文字无效
直接给 <input type="radio"> 设置 vertical-align: middle 通常没用，因为它的父容器（比如 <td>）默认是 display: table-cell，而 vertical-align 在这里控制的是单元格内容整体的垂直位置，不是内部行内元素的对齐逻辑。更关键的是：单选框本身是替换元素（replaced element），浏览器对其 baseline 的计算与文字不一致，尤其在中文环境下，middle 实际对齐的是小写字母 x 的中心，不是汉字视觉中心。
真正起作用的 vertical-align 该加在哪儿
必须把 vertical-align 加在单选框自身上，并确保它处于行内上下文 —— 即它不能被包裹在块级元素里（如 <p>、<div>），且父容器不能干扰行盒布局。
- ✅ 正确写法：
<td><input type="radio" style="vertical-align: middle;"> 选项文字</td> - ❌ 错误写法：
<td><div><input type="radio" style="vertical-align: middle;"></div> 选项文字</td>（<div>是块级，打断行内流） - ⚠️ 注意：如果文字用了
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 容器最省心。
立即学习“前端免费学习笔记（深入）”；
td {
display: flex;
align-items: center;
}
- 不需要关心 baseline 或字体大小影响
- 自动适配多行文字、图标、甚至带 label 的完整单选组
- 注意：若
<td>内还有其他块级内容（如<br>或额外<div>），需确保它们不破坏 flex 流
真正麻烦的从来不是写一行 vertical-align: middle，而是发现它在某个字号、某款浏览器、某段中文文案下突然错位 1px —— 这时候别硬调，换 flex 就是最快止损方式。
