如何使用CSS将HTML复选框(input checkbox)定位到最左侧

我有一个采用flex布局、设置了justify-content和align-items:center的容器div，但希望复选框靠左对齐。以下是我尝试过的代码：

原有代码 #

CSS

.candidate label {
  display: flex;
}

.candidate label input {
  position: absolute;
}
/*I tried using: */
.candidate label {
  display: flex;
}

.candidate label input {
  position: absolute;
}

HTML

<div class="item candidate">
  <p>Why are you the perfect Candidate?</p>
  <label>
    <input name="candidate" value="Cat-Person" type="checkbox"/>
    Because I am a Cat Person
  </label>
  <label>
    <input name="candidate" value="Companion" type="checkbox"/>
    Looking for a Companion
  </label>
  <label>
    <input name="candidate" value="Help" type="checkbox"/>
    Want to help Cats
  </label>
</div>

解决方案 #

方案1：让label占满宽度并内部靠左对齐

父容器的flex居中会让label收缩并居中，所以先让每个label占满容器可用宽度，再在label内部设置靠左对齐：

/* 明确父容器的flex样式（补全缺失部分） */
.item.candidate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px; /* 限制容器宽度，避免过宽 */
  margin: 0 auto; /* 让容器本身水平居中 */
}

.candidate label {
  display: flex;
  align-items: center;
  width: 100%; /* 让label占满容器宽度 */
  justify-content: flex-start; /* 内部元素靠左排列 */
  gap: 8px; /* 可选：给复选框和文本添加间距，提升美观度 */
}

/* 去掉绝对定位，恢复正常文档流 */
.candidate label input {
  position: static;
}

方案2：调整容器的对齐方式

如果不需要label整体居中，仅需容器内部元素垂直居中，可以修改容器的align-items属性，同时用min-height保证垂直居中的空间：

.item.candidate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 子元素靠左对齐 */
  max-width: 600px;
  margin: 0 auto;
  min-height: 200px; /* 撑出垂直居中的空间 */
}

.candidate label {
  display: flex;
  align-items: center;
  gap: 8px;
}

原有方法失效原因 #

你使用的position: absolute会让复选框脱离正常文档流，导致文本覆盖到复选框位置，且无法保证不同屏幕下的对齐一致性，完全破坏了flex布局的正常排版逻辑。

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