CSS 垂直对齐复选框/标签对

在本文中，我们将介绍如何使用CSS实现复选框和标签对的垂直对齐效果。

CSS提供了多种方法来实现垂直对齐效果，这些方法可以适用于各种布局需求。我们将分别介绍三种常见的方法：使用表格布局、使用flexbox布局和使用网格布局。

阅读更多：CSS 教程

使用表格布局

表格布局是一种简单且适用于各种场景的布局方法。我们可以将复选框和标签对放入一个表格单元格中，并设置单元格的垂直对齐方式为居中。

<table>
  <tr>
    <td><input type="checkbox" id="checkbox1"></td>
    <td><label for="checkbox1">选项1</label></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox2"></td>
    <td><label for="checkbox2">选项2</label></td>
  </tr>
</table>

td {
  vertical-align: middle;
}

通过设置表格单元格的垂直对齐方式为居中，我们可以实现复选框和标签对的垂直对齐效果。

使用flexbox布局

flexbox布局是一种强大的布局方式，可以用于实现各种复杂的布局需求。使用flexbox布局，我们可以很容易地实现复选框和标签对的垂直对齐效果。

<div class="container">
  <div class="checkbox-label-pair">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">选项1</label>
  </div>
  <div class="checkbox-label-pair">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">选项2</label>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
}

.checkbox-label-pair {
  display: flex;
  align-items: center;
}

通过将容器的display属性设置为flex，并设置容器的align-items属性为center，我们可以使复选框和标签对在垂直方向上居中对齐。

使用网格布局

网格布局是一种灵活且强大的布局方式，可以用于实现各种复杂的布局需求。使用网格布局，我们可以实现复选框和标签对的垂直对齐效果。

<div class="container">
  <div class="checkbox"><input type="checkbox" id="checkbox1"></div>
  <label for="checkbox1">选项1</label>
  <div class="checkbox"><input type="checkbox" id="checkbox2"></div>
  <label for="checkbox2">选项2</label>
</div>

.container {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  grid-gap: 10px;
}

.checkbox {
  display: flex;
  align-items: center;
}