如何在HTML中实现标签居上居中的水平排列复选框行

问题现状 #

默认的复选框与标签组合会将标签渲染在复选框右侧，呈现效果：

Label []  Label []  Label []  Label []

期望实现效果为：所有选项水平排布，标签居中对齐在对应复选框的正上方，复选框整体排成水平行，参考效果：

Label    Label    Label    Label

  [.]      [.]      [.]      [.]

（示例中点号为排版占位符，无实际意义）

解决方案 #

不需要复杂的表格布局，用Flex布局就能快速实现，核心是把每个「标签+复选框」封装为独立的垂直排列容器，再让所有容器横向排布即可。

完整可运行代码 #

<style>
/* 所有选项的外层容器，控制横向排列 */
.option-wrap {
  display: flex;
  column-gap: 48px; /* 调整这个值可以修改选项之间的水平间距 */
}
/* 单个选项容器，控制内部标签在上、复选框在下，居中对齐 */
.single-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6px; /* 调整这个值可以修改标签和复选框的垂直间距 */
}
</style>

<div class="option-wrap">
  <div class="single-option">
    <label for="check1">Label</label>
    <input type="checkbox" id="check1">
  </div>
  <div class="single-option">
    <label for="check2">Label</label>
    <input type="checkbox" id="check2">
  </div>
  <div class="single-option">
    <label for="check3">Label</label>
    <input type="checkbox" id="check3">
  </div>
  <div class="single-option">
    <label for="check4">Label</label>
    <input type="checkbox" id="check4">
  </div>
</div>

关键属性说明 #

• 外层容器设置display: flex默认就是横向排列子元素，column-gap专门控制子元素之间的水平间距，不会给容器两侧加多余边距
• 单个选项容器设置flex-direction: column会把子元素（标签、复选框）改为从上到下垂直排列，搭配align-items: center就能让内部所有元素水平居中，自动实现标签在复选框正上方居中的效果
• label标签和复选框通过for和id属性绑定，点击标签也能切换复选框选中状态，符合常规交互逻辑
• 如果需要添加更多选项，直接复制.single-option模块加在外层容器里即可，布局会自动适配

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