最常用解法是直接给<input type="radio">设vertical-align: middle，但须确保其处于行内上下文、不被块级元素包裹；字体变大时需微调，推荐优先使用display: flex替代。
给 <input type="radio"> 自身加 vertical-align: middle
直接在单选框标签上写 style="vertical-align: middle;" 是最常用也最轻量的解法，但前提是它必须处于行内上下文——即不能被 <div>、<p> 等块级元素包裹，也不能和文字分处在不同行内容器里。
常见错误：<td><div><input type="radio" style="vertical-align: middle;"></div>选项文字</td> —— <div> 会打断行盒（inline formatting context），导致 vertical-align 失效。
- ✅ 正确结构：
<td><input type="radio" style="vertical-align: middle;"> 选项文字</td> - ⚠️ 字体变大后仍可能偏高：若文字
font-size> 16px，vertical-align: middle对齐的是小写字母 x 的中心，不是汉字视觉中心，需配合margin-top: -1px微调 - ❌ 不要设在
<td>上：给单元格设vertical-align: middle控制的是整个单元格内容块的垂直位置，不是内部单选框与文字之间的相对对齐
用 display: flex 替代表格单元格布局
当单选组里有多个选项、或文字换行、或需要响应式适配时，vertical-align 很快会失效。此时把 <td> 或外层容器设为 display: flex 是更稳的选择。
示例：td { display: flex; align-items: center; gap: 8px; } —— align-items: center 无视 baseline 差异，自动让所有子元素（包括单选框、文字、<label>）在交叉轴上居中。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持多行文字：即使文字 wrap 成两行，依然能垂直居中对齐单选框
- ✅ 兼容 label + for：可保留语义化写法，如
<input id="opt1"><label for="opt1">选项一</label>，二者同级即可 - ⚠️ 注意嵌套干扰：如果
<td>内还有其他display: block元素（比如<div class="hint">），它们会破坏 flex 主轴流，建议统一用flex或提取到独立容器
Firefox 和 IE 下的对齐偏差怎么处理
Firefox 把 <input type="radio"> 当图像渲染，IE（尤其是 IE8–10）按原生控件基线处理，两者对 vertical-align: middle 的解释存在 1–2px 偏差，纯靠 CSS 很难抹平。
- ? Firefox 可补
margin-bottom: 1px或margin-top: -1px（仅限必要兼容场景） - ? IE 更推荐用
vertical-align: text-bottom+ 统一line-height配合，但会牺牲部分语义一致性 - ? 不建议为兼容旧浏览器强行 hack：2026 年绝大多数项目已无需支持 IE，优先用
flex方案；若真需保 IE，直接改用display: table-cell模拟老式对齐逻辑反而更可控
为什么 margin-top 在单选框上经常没用
因为默认情况下，<input type="radio"> 是 inline-level 替换元素，其垂直方向的 margin 不参与行高计算，也不影响 baseline 对齐位置——你调了 margin-top，但文字的 baseline 没动，视觉上还是错位。
- ✅ 有效前提：必须先确保它和文字在同一个行盒里，且没有父级块元素阻断
- ✅ 更可靠的做法：用
transform: translateY(-50%)配合position: relative，但这是“绕开 baseline”的权宜之计，不推荐作为首选 - ⚠️ 最容易被忽略的一点：很多开发者试了一堆 margin 却没检查字体是否加载完成——Web Font 加载延迟会导致初始渲染时行高突变，造成临时错位，刷新后又正常
