vertical-align: middle 对单选框无效，因其对齐的是小写字母x的中心线而非汉字视觉中心；应改用flex布局，外层容器设display: flex和align-items: center。
vertical-align: middle 加在 <input type="radio"> 自身上才可能起效，但多数情况下它仍会偏高或错位——这不是你代码写错了，是浏览器对 baseline 的计算逻辑和中文排版天然冲突。
为什么 vertical-align: middle 总是不准
它实际对齐的是小写字母 x 的中心线（x-height 中点），不是汉字的视觉中心。中文没有 x，字体越大，偏差越明显；Firefox 把 <input type="radio"> 当图片渲染，IE 则按旧表单控件基线算，Chrome 又略有不同。哪怕字号只调 1px，都可能让单选框“浮”起来或“沉”下去。
-
vertical-align: middle加在<td> 或 <code><div> 上完全无效，因为该属性只对 inline / inline-block 元素生效 <li>文字被包在 <code><p></p>、<div>（未设 <code>display: inline）里，会打断行内流，导致对齐失效 - 仅靠
line-height撑高容器，不改变 baseline 位置，纯属误导 - 结构必须语义正确：
<input type="radio" id="opt1"><label for="opt1">选项一</label> - 外层容器加类如
.radio-flex，CSS 写：`.radio-flex { display: flex; align-items: center; gap: 8px; }` - 去掉
<input>上所有vertical-align、float、margin-top等干扰项 - 若 label 内容多行，加
label { align-self: flex-start; }防止文字被拉伸 -
td { display: flex; align-items: center; padding: 4px 0; }即可统一控制所有单元格内单选组 - 避免在
<td> 里嵌套额外 <code><div> 或 <code><p></p>，否则 flex 流会被破坏 - 如果必须兼容 IE10 及以下，改用
display: table-cell+vertical-align: middle，但需配合font-family: Tahoma, Verdana和固定font-size才勉强可控
用 Flex 布局彻底绕过 baseline 问题
把单选框和文字包裹进一个 display: flex 容器，用 align-items: center 控制垂直对齐，不再依赖行内元素的 baseline 行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
表格中单选框对齐的实操要点
在 <td> 里直接设 <code>display: flex 最稳，比折腾 vertical-align 省心十倍。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的从来不是写一行 vertical-align: middle，而是发现它在某个字号、某款浏览器、某段中文文案下突然偏移 2px——Flex 布局不是“高级技巧”，它是解决这个问题的默认路径。
