Bootstrap v5单选框与大尺寸标签无法垂直对齐求助

核心问题原因 #

Bootstrap 5的.form-check默认采用Flex布局，且默认对齐方式为align-items: flex-start，当标签内包含按钮这类高度大于默认值的元素时，单选框会保持在容器顶部，无法自动居中。

方案1：使用Bootstrap内置Flex类（最简方案） #

直接给.form-check容器添加align-items-center类，利用Bootstrap内置的Flex对齐属性实现垂直居中：

<div class="form-check form-check-inline align-items-center" id="btnColour" onchange="generateBtnCode()">
   <input class="form-check-input" name="btnColour" id="btn-secondary" type="radio" value="secondary">
   <label class="form-check-label" for="btn-secondary"><a class="btn btn-secondary">Secondary Grey</a></label>
</div>

方案2：自定义CSS兜底方案 #

如果内置类因自定义样式冲突不生效，可添加以下自定义CSS强制调整单选框对齐：

/* 方式1：直接调整单选框的垂直位置 */
.form-check-input {
  transform: translateY(50%);
}

/* 方式2：覆盖容器的Flex对齐属性 */
.form-check.radio-center-container {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 可选：调整单选框与标签的间距 */
}

使用时给容器添加radio-center-container类即可。

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