核心问题是浏览器对radio和label的baseline渲染逻辑不一致，vertical-align:middle实际对齐x-height中心而非视觉中心，中文无小写字母x导致偏移；Firefox视radio为图片、IE用旧盒模型，结果天然不统一；最稳定解法是用display:flex包裹每组label+input，设align-items:center，彻底脱离inline流依赖。
单选按钮组对齐不稳定，核心问题不是样式没加够，而是浏览器对 input[type="radio"] 和 label 的 baseline 渲染逻辑根本不一致——用 vertical-align: middle 硬调，90% 场景下会失效。
为什么 vertical-align: middle 总是偏移
它对齐的是父容器“x-height 中心”，不是文字视觉中心。中文无小写字母 x，14px 思源黑体下可能上浮 2px，换成 13px 就又下沉；Firefox 把 radio 当图片处理，IE 按旧盒模型算基线，结果天然不统一。常见现象包括：radio 悬在文字上方、多行 label 完全错位、左右间距忽大忽小。
不要只给 input 设 vertical-align，必须同时控制其父级或容器的 display 行为和对齐上下文。
- 禁用
float或position: relative微调——会破坏可访问性与语义结构 - 避免单独给
label加padding-bottom：DevTools 能看到 padding，但input位置完全不动 - 别依赖 HTML 源码换行“看起来整齐”：标签间空格会被渲染成空白节点，flex 布局里反而多出不可见间隙
用 display: flex 包裹每组 label + input
这是目前最稳定、跨浏览器兼容、且无需 hack 的解法。关键不是“让 radio 对齐文字”，而是把对齐行为从 inline 流中抽离出来，交由 flex 主动控制。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
结构必须带 for/id 关联：<input type="radio" name="opt" id="opt1"><label for="opt1">选项一</label>
- 容器（如
<div class="radio-item">）设display: flex; align-items: center; gap: 8px; - 移除
input上所有vertical-align、float、margin-top类样式 - 若
label文本较长需多行显示，加align-self: flex-start防止被拉伸变形 - 整个按钮组外层可再套一层
display: flex; flex-direction: column;实现垂直堆叠
兼容旧版浏览器时用 inline-block 替代方案
如果必须支持 IE9 及以下，display: inline-block 是唯一轻量可行路径，但细节更敏感。
- 必须同时给
input和label（或它们的共同父span）设display: inline-block，否则vertical-align无效 - 显式设置
vertical-align: top或vertical-align: middle，并配合font-size: 0在父容器上消除空格间隙 - HTML 源码中所有
label必须写在同一行，或使用<!-- -->注释消除换行符 - IE6–7 需额外加
*vertical-align: 1px（仅 IE6/7 识别）
表格内单选按钮组怎么对齐
直接把 input 和 label 塞进 <td> 会导致严重错位：默认 vertical-align: baseline + padding 不一致 + 表格行高计算干扰。
- 先给
<td>设padding: 6px 8px; vertical-align: middle; - 再用
<div class="radio-group">包裹整组单选，设display: flex; gap: 12px; - 每个
.radio-item仍按前述 flex 方式处理，确保内部对齐独立于表格上下文 - 禁用
<td align="right">这类 HTML 属性：它是继承属性，会污染整行内联内容对齐
真正难的不是写出能对齐的代码，而是意识到：所有“看起来对不齐”的问题，根源都在布局上下文是否被显式定义。一旦依赖浏览器默认 inline 行为，就等于把对齐权交给了不可控的字体度量和历史渲染逻辑。
