vertical-align: middle 对 radio 无效因 baseline 计算差异，应重置 input margin 并用 flex+align-items: center 或 table-cell 兼容旧版。
label 和 <input type="radio"> 必须放在同一行内上下文里
把 <label> 和 <input type="radio"> 放在同一个 <td> 或 <div> 里，但不能用块级容器隔开。一旦中间插入 <p>、<div> 或设了 display: block 的 wrapper，vertical-align 就失效——因为行盒（line box）被破坏了。
常见错误写法：<td><div><input type="radio" style="vertical-align: middle;"></div>选项文字</td>；正确写法是：<td><input type="radio" style="vertical-align: middle;">选项文字</td>。
-
<input>必须是行内级元素（默认就是），且不能被float、position: absolute或display: block干扰 - 如果用了
<label for="xxx">包裹文字，那<input>得放在<label>外面或里面，但整个组合仍需保持行内流 - 中文环境下，
font-size超过 14px 后，vertical-align: middle容易偏高，建议搭配margin-top: -1px微调
为什么 vertical-align: middle 加在 <label> 上基本没用
<label> 默认是 inline 元素，但它本身不参与 baseline 对齐计算；真正影响对齐的是其中的文本内容。而 <input type="radio"> 是替换元素，浏览器按图像规则处理它的基线——Firefox 当它是 <img>，IE 按原生控件算，Chrome 则介于两者之间。所以给 <label> 设 vertical-align 不会拉扯 <input>，反而可能让文字自己“飘”。
- 错误做法：
label { vertical-align: middle; }+input { vertical-align: middle; }—— 两者基准不同，结果不可控 - 更糟的是：如果
<label>用了display: inline-block却没设line-height，它的内部行盒高度会塌缩，进一步放大错位 - 验证方法：打开 DevTools，选中
<input>，看 computed 中的baseline位置是否和旁边文字一致
现代项目优先用 flex，但别漏掉关键重置
把 <td> 或外层 <div> 设为 display: flex + align-items: center 是最稳的方案，它绕过了 baseline 计算差异。但直接套上去常翻车，因为 <input type="radio"> 默认有 margin，不同浏览器值还不一样。
立即学习“前端免费学习笔记（深入）”；
- 必须重置：
input[type="radio"] { margin: 0; }，否则 Firefox 下左右多出 2px，Chrome 下顶部多 1px -
<label>如果是包裹文字的语义化写法（<label><input>文字</label>），要确保它没设display: block，否则 flex 项会被撑成整行 - 若 label 文字较长需换行，加
white-space: normal和flex-wrap: wrap，但注意align-items: center会让多行文字整体居中，不是每行居中
兼容 IE8–10 的 fallback 方案实际很窄
真要支持 IE8–10，display: table-cell 是唯一靠谱选择，但仅适用于单行、固定结构的场景。把整组 <label>+<input> 包进一个 display: table 容器，再分别设 display: table-cell + vertical-align: middle。
- 缺点明显：无法响应式换行，
table-cell会强制等高，导致空单元格也占高度 - IE9 下
<input type="radio">的height无法精确控制，建议统一用font-size: 12px配合line-height: 16px稳定 baseline - 如果表单里混用了
<select>或<textarea>，这套方案会立刻崩——它们在 IE 中的渲染逻辑和 radio 完全不一致
margin 或放任 <label> 自动换行，视觉偏差就会回来。 
