vertical-align是解决单选框与文字对齐的关键，因input[type="radio"]默认baseline对齐导致视觉偏上；text-align: center无效因其仅控制水平布局；推荐直接设置input[type="radio"] { vertical-align: middle; }或改用flex布局实现稳定居中。
input[type="radio"] 默认是行内替换元素，它和紧邻的 label 文字默认基线对齐（baseline），但视觉上常显得“偏上”或“不居中”，尤其在自定义样式后更明显。根本原因不是文字没居中，而是单选按钮自身没有参与父容器的垂直对齐控制——vertical-align 才是关键开关。
为什么 text-align: center 不管用？
它只影响行内内容的**水平**分布，对 input 和 label 之间的**上下位置关系**毫无作用。常见错误是给 label 或父 div 加了 text-align: center 就以为万事大吉，结果按钮浮在文字上方，尤其在字号变大或行高增加时更刺眼。
无序列表呈现关键点：
-
text-align控制的是“盒内文字怎么排”，不是“盒和文字怎么相对摆” - 单选按钮默认
vertical-align: baseline，而 baseline 是字母 x 的下沿，不是盒子中线 - 若父容器设置了
line-height，且未同步调整vertical-align，错位会放大
vertical-align: middle 怎么设才生效？
必须作用在 input[type="radio"] 本身，或其同级的 label（如果 label 是 inline/inline-block）。设在父容器上无效。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
input[type="radio"] {
vertical-align: middle;
margin-right: 8px; /* 避免文字贴太近 */
}
label {
vertical-align: middle; /* 可选，辅助对齐 */
}注意：vertical-align: middle 的“middle”是指**行框内中线与父元素 font-size 的 0.5ex 处对齐**，不是绝对居中；但在绝大多数常规字号+行高组合下，视觉效果已足够稳。
容易踩的坑：
- 给
input设了display: block后再加vertical-align—— 无效，block 元素不响应该属性 - 用了自定义背景图或伪元素模拟单选按钮，却忘了给新生成的元素也设
vertical-align - 父容器
line-height过小（如line-height: 1），导致行框高度压缩，middle对齐基准失真
Flex 布局方案：更可控但需改结构
当需要精确控制、或配合图标/多行文字时，把 input 和 label 包进一个 div，再用 flex 居中最可靠：
<div class="radio-item">
<input type="radio" name="opt" id="opt1">
<label for="opt1">选项一</label>
</div>
<p>.radio-item {
display: flex;
align-items: center;
gap: 8px;
}优势：
- 完全绕过 baseline 对齐陷阱，
align-items: center直接按容器中线对齐 - 支持任意字体大小、行高、甚至图标
img或svg - 响应式友好，
gap比硬写margin更健壮
代价：每个单选组都要包一层，HTML 结构略增；若全局替换，需检查旧 JS 是否依赖原生 DOM 层级。
真正容易被忽略的是：自定义单选按钮（比如用 ::before + background-image）后，vertical-align 依然要设在原始 input 上——因为伪元素不改变原生元素的对齐行为，只是盖在上面。不处理这层，再好看的图标也会“飘”着。
