Flex布局下单选按钮与文本垂直对齐偏差的调整方法

你遇到的这个情况确实是浏览器默认排版逻辑导致的——表单元素（比如单选按钮）的对齐基线会考虑字母的下沉部分，即使设置了align-items: center，视觉上还是会有偏移。下面是几个实用的调整方案：

方案1：微调单选按钮的垂直对齐 #

直接给单选按钮设置vertical-align属性，或者微调margin来修正位置：

.panswers input[type="radio"] {
  vertical-align: middle;
  /* 或者根据实际情况微调margin，比如：
  margin-top: -1px;
  */
}

方案2：统一子元素的行高与边距 #

p标签默认带有上下外边距，且不同元素的行高差异也会影响对齐，统一这些属性能让对齐更稳定：

.panswers {
  display: flex;
  align-items: center;
  line-height: 1.5; /* 统一行高 */
}
.panswers p {
  margin: 0; /* 去掉p标签默认的上下边距 */
}
.panswers label,
.panswers input {
  line-height: inherit; /* 继承容器行高 */
}

方案3：重置表单元素默认样式（自定义可控） #

如果需要完全对齐且统一样式，可以重置单选按钮的默认外观，自己定义样式，这样完全规避浏览器默认的对齐偏差：

.panswers input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #666;
  border-radius: 50%;
  margin: 0 8px 0 4px;
  position: relative;
  top: 0; /* 可自由调整位置 */
}
.panswers input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #666;
  border-radius: 50%;
  margin: 2px auto;
}

另外注意你的HTML里单选按钮的id属性有语法错误，应该是id='ans[1]'，否则label和input的关联会失效：

<div class='panswers'>
  <label for='ans[1]'>A</label>
  <input type='radio' name='ans[1]' id='ans[1]'>
  <p>Why are local variable names beginning with an underscore discouraged?</p>
</div>

内容的提问来源于stack exchange，提问作者DCR