CSS如何实现复选框与文本居中对齐 解决flex对齐错位问题

问题现状 #

需要实现复选框与配套文本垂直居中对齐、两行选项上下整齐排列的效果，已给选项容器添加justify-content: center样式，但始终无法达到正确对齐的效果。

现有代码 #

CSS 代码 #

#hyper {
    color: #01539C;
    font-family: BurbankSmallBold;
    text-decoration: none;
}
#terms, #agree  {
   font-family: ArialRegular;
   font-size: 10pt;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}

HTML 代码 #

<div id="agree"><input type="checkbox" name="agree"><label>I agree to the CP Rules.</label></div>
<div id="terms"><input type="checkbox" name="terms"><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label></div>

问题原因 #

现有代码存在3个影响对齐的问题：

• 没有清除浏览器给复选框默认添加的固有margin，自带边距会打乱垂直对齐基准
• 复选框和相邻label之间没有设置统一间距，视觉上容易出现错位
• 两个选项分别作为独立flex容器单独居中，会因为两行文本长度不同，导致复选框无法在垂直方向保持同列对齐

修复方案 #

• 清除复选框的浏览器默认margin，消除默认样式对对齐的干扰
• 给复选框和右侧文本标签设置统一间距，保证同一行内视觉对齐一致
• 新增统一父容器包裹两个选项，控制两行整体居中，同时让两个复选框保持垂直同列对齐，避免因为文本长度差异导致错位
• 可通过1px的位移微调复选框垂直位置，和文本中线完全贴合

修复后完整代码 #

#hyper {
    color: #01539C;
    font-family: BurbankSmallBold;
    text-decoration: none;
}
/* 父容器控制两个选项整体居中、上下间距统一 */
.agree-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
}
#terms, #agree  {
   font-family: ArialRegular;
   font-size: 10pt;
   display: flex;
   align-items: center;
   gap: 6px; /* 统一复选框和文本的间距 */
   width: 100%;
}
/* 重置复选框默认边距，微调垂直位置对齐文本中线 */
#terms input, #agree input {
    margin: 0;
    transform: translateY(1px);
}

<div class="agree-wrap">
    <div id="agree"><input type="checkbox" name="agree"><label>I agree to the CP Rules.</label></div>
    <div id="terms"><input type="checkbox" name="terms"><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label></div>
</div>

修复后效果：两行选项整体在页面居中，同一行内复选框和文本垂直居中对齐，两行的复选框垂直方向完全齐平，达到预期排列效果。

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