如何让checkbox与上方带label的同级text input垂直居中对齐？

我尝试让checkbox input与其同级的text input垂直居中对齐。text input的label位于其上方，而checkbox的label则在其侧边。使用flexbox的align-items: center属性无法实现需求——该属性会将checkbox与包含label的整体高度居中对齐，导致checkbox位置偏上，无法和text input的中部对齐。

原示例代码如下：

原CSS代码 #

.wrapper { display: flex; align-items: center; }
label span { display: block; }

原HTML代码 #

<div class="wrapper">
  <label>
    <span>label:</span>
    <input type="text">
  </label>
  <label>
    <span>label:</span>
    <input type="text">
  </label>
  <label>
    <input type="checkbox"> label
  </label>
</div>

期望效果：checkbox的垂直位置与text input的中部对齐，即checkbox的中心线和文本输入框的中心线在同一水平线上。

解决方案 #

可以通过调整flex容器的对齐方式，并单独设置checkbox所在label的外边距和内部布局，实现精准对齐：

修改后的CSS代码

.wrapper {
  display: flex;
  align-items: flex-start; /* 让所有label顶部对齐，避免整体居中导致的偏移 */
  gap: 1rem; /* 可选：增加元素间间距，布局更美观 */
}

label span {
  display: block;
  line-height: 1.5em; /* 定义label文本的行高，用于计算偏移量 */
}

/* 单独处理checkbox所在的label */
.wrapper label:last-child {
  margin-top: 1.5em; /* 偏移量等于上方label文本的行高，让checkbox对齐到text input的中部 */
  display: flex;
  align-items: center; /* 让checkbox和自身的label文本垂直居中 */
}

修改后的HTML代码（无需调整结构）

<div class="wrapper">
  <label>
    <span>label:</span>
    <input type="text">
  </label>
  <label>
    <span>label:</span>
    <input type="text">
  </label>
  <label>
    <input type="checkbox"> label
  </label>
</div>

原理说明 #

1. 将wrapper的align-items改为flex-start，让三个label元素从顶部开始排列，避免原center值导致checkbox与整个text label的中心对齐。
2. 给checkbox所在的label设置margin-top，值等于text label中上方文本的行高——这样checkbox的中心位置会恰好和text input的中心位置重合，因为text input的中心距离顶部的高度就是“文本行高 + 输入框高度的一半”，而checkbox的中心距离顶部的高度是“margin-top + checkbox高度的一半”，输入框和checkbox的高度基本一致，因此偏移量等于文本行高即可实现对齐。
3. 给checkbox的label设置display: flex; align-items: center，确保checkbox和它的侧边label文本自身垂直居中。

如果需要更自适应的效果，可以用CSS变量统一管理行高：

:root {
  --label-line-height: 1.5em;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

label span {
  display: block;
  line-height: var(--label-line-height);
}

.wrapper label:last-child {
  margin-top: var(--label-line-height);
  display: flex;
  align-items: center;
}

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