radio与label垂直居中失效是因vertical-align依赖x-height基线，而中文无x字母；flex方案最可靠：用.radio-item{display:flex;align-items:center}包裹input+label，彻底绕过baseline计算。
单选框 radio 和紧邻的 label 无法视觉垂直居中，不是你漏写了样式，而是浏览器对 vertical-align 的计算逻辑天然不兼容中文/无 x-height 字体。
为什么 vertical-align: middle 总是偏高或偏低
它对齐的是“行框中 x 字母的中心线”，不是文字视觉中心。中文没有小写字母 x，14px 思源黑体下这个中线比实际字形中心高 2–3px；Firefox 把 input[type="radio"] 当图片处理，Chrome 按表单控件基线算，IE 更是另起一套——结果就是同一段代码，在不同环境里错位方向还不一样。
常见错误现象包括：radio 悬在文字上方、label 文字被往下“吊”一截、多行 label 时上下完全错开。
- 别只给
input加vertical-align: middle，label也必须同步设display: inline-block+vertical-align: middle - 字号变化（比如从 16px 改成 15px）就可能让原本“刚好”的对齐失效
- IE6–7 需额外加
*vertical-align: 1px（仅 IE6/7 识别）
用 display: flex 彻底绕过 baseline 计算
这是目前最稳定、零 hack、跨浏览器一致的解法：把每组 input + label 包进一个容器，用 flex 控制对齐，完全不依赖行内基线。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
结构必须带 id 和 for 属性，保障可访问性：
<div class="radio-item"> <input type="radio" name="theme" id="theme-dark" value="dark"> <label for="theme-dark">深色模式</label> </div>
对应 CSS：
.radio-item { display: flex; align-items: center; gap: 8px; }- 删掉
input上所有vertical-align、float或margin-top类样式 - 若
label内容可能换行，加label { align-self: flex-start; }防止被拉伸变形 - iOS Safari 对
label点击热区有偏差，建议加cursor: pointer和min-height: 1.2em
表格里嵌 radio 怎么对齐不挤成一团
直接给 td 设 text-align: center 或 vertical-align: middle 不够——radio 和 label 仍会因 baseline 不一致而错位，且多行文本会撑高整行。
- 先确保
td有足够呼吸空间：padding: 6px 12px; vertical-align: middle; - 把每组
input + label包进<div class="radio-cell">，再对这个 div 设 <code>display: flex; align-items: center; - 避免给
input单独设width或height，优先用min-width和padding控制尺寸 - 如果表格本身需要响应式，
.radio-cell可加flex-wrap: wrap;允许 label 换行，同时保持 radio 始终左对齐
真正麻烦的从来不是“怎么写”，而是“为什么写了还不生效”——radio 和 label 的对齐问题，本质是浏览器渲染模型与中文排版习惯的冲突。Flex 方案之所以可靠，是因为它根本不参与那套 baseline 计算，而是用明确的坐标轴控制位置。只要容器层级干净、子元素没脱离 flex 流（比如加了 position: absolute），就能稳住。
