如何实现Label与Input元素的垂直居中对齐？

当前Input和Option元素默认顶部对齐，且底部间距会随Label的font-size大小变化，需要实现无论文本字号多大，Label与对应的表单元素都能垂直居中对齐。

当前代码示例 #

CSS代码 #

.options label {
  font-size: 1.5rem;
}

.options {
  display: grid;
  grid-template: "a a" "b b";
  justify-content: center;
  align-content: center;
  gap: 1rem;
  padding: 5px;
}

HTML代码 #

<div class="options">
  <div>
    <label for="input1">input1</label><br />
  </div>

  <div>
    <input type="checkbox" id="input1" />
  </div>

  <div><label for="input2">input2</label><br /></div>

  <div>
    <input type="checkbox" id="input2" />
  </div>

  <div>
    <label for="option1">option1</label>
  </div>

  <div>
    <select id="option1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
</div>

解决方案 #

核心思路是让标签与对应表单元素处于同一布局容器内，通过布局属性实现垂直居中，具体实现如下：

修改后的代码 #

CSS代码

.options label {
  font-size: 1.5rem;
}

.options {
  display: grid;
  grid-template-columns: 1fr; /* 改为单列布局，每组表单占一行 */
  justify-content: center;
  gap: 1rem;
  padding: 5px;
}

.form-group {
  display: flex;
  align-items: center; /* 让内部元素垂直居中 */
  gap: 0.5rem; /* 控制标签和表单元素的间距 */
}

HTML代码

<div class="options">
  <div class="form-group">
    <label for="input1">input1</label>
    <input type="checkbox" id="input1" />
  </div>

  <div class="form-group">
    <label for="input2">input2</label>
    <input type="checkbox" id="input2" />
  </div>

  <div class="form-group">
    <label for="option1">option1</label>
    <select id="option1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
</div>

效果说明 #

• 新增的.form-group容器将每组标签和表单元素绑定在一起，确保它们共享同一布局上下文
• align-items: center会让容器内的元素基于基线垂直居中，无论label的字号如何调整，表单元素都会始终和标签中线对齐
• 调整后的grid布局为单列，每组表单独立占据一行，布局更清晰，间距控制更灵活

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