Bootstrap中btn-check组件的label文本未垂直居中问题

核心原因 #

Bootstrap的btn-check组件搭配btn使用时，默认行内布局在文本换行后，容易出现垂直对齐偏移，短文本标签和长文本标签混排时这个问题会更明显。

具体修复方案 #

1. 先确认HTML结构规范

确保你的复选框嵌套符合Bootstrap官方要求，正确结构示例：

<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">这是一段很长的标签文本，会自动换行显示</label>
  
  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">短标签</label>
</div>

2. 添加自定义CSS强制垂直居中

给按钮标签添加flex布局并设置垂直对齐，覆盖默认的对齐逻辑：

.btn-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* 可选：统一按钮最小高度，让整体对齐更整齐 */
}

如果要精准针对复选框关联的按钮，可使用更具体的选择器：

.btn-group [type="checkbox"] + .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

3. 垂直按钮组的特殊调整

如果你的按钮组是垂直方向（btn-group-vertical），只需根据需求调整对齐属性即可：

.btn-group-vertical .btn {
  align-items: center; /* 控制水平居中 */
  justify-content: flex-start; /* 若需要文本左对齐同时保持垂直居中 */
}

效果验证 #

添加上述CSS后，无论标签文本长短，所有按钮内的内容都会保持垂直居中，短标签不会因高度不足偏移到顶部。

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