Bootstrap表单中实现单选按钮标签文本垂直居中（兼容单行与多行文本）

嗨，我来帮你搞定这个单选按钮文本垂直居中的问题！你现在遇到的问题主要是用了硬编码的top、margin-top这些固定数值，导致单行文本没法和多行文本一样垂直对齐。咱们用Flexbox就能轻松解决这个适配问题，而且完全兼容Bootstrap的布局。

问题分析 #

你原来的CSS里给.form-check加了top:13.33333px和.form-check-input加了margin-top:1em，这些固定值只适合特定行数的文本，一旦文本行数变化，对齐就会错位。而Flexbox是专门用来处理这种动态对齐场景的。

解决方案 #

先修改你的CSS样式，用Flexbox来实现垂直居中：

.form-check {
  cursor: pointer;
  background-color: #e2e2e2;
  padding: 10px 45px;
  font-size: 1.4em;
  margin-top: 1em;
  /* 核心：启用flex布局并设置垂直居中 */
  display: flex;
  align-items: center;
  /* 如果你需要保持最小高度可以保留，不需要的话可以删掉 */
  min-height: 85px;
}

.form-check .form-check-input {
  /* 去掉固定的margin-top，换成右边距和文本隔开 */
  margin-right: 15px;
  /* 重置Bootstrap默认的margin-top，避免偏移 */
  margin-top: 0;
}

然后调整你的HTML结构，把文本放到<label>标签里面（这是更规范的语义化写法，也能让样式控制更顺畅）：

<div class="container">
  <div class="row spacerow mt-3">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-2">
      <div>Questions</div>
      <div class="row align-items-center">
        <div class="col-lg-6 col-md-6 col-sm-12 col-12 mt-2">
          <div class="form-check">
            <input type="radio" class="form-check-input" id="option1" name="options" value="1" checked>
            <label class="form-check-label" for="option1">One line sentence</label>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-12 mt-2">
          <div class="form-check">
            <input type="radio" class="form-check-input" id="option2" name="options" value="2">
            <label class="form-check-label" for="option2">Two lines radio buttons text which is centered inside form-check div</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为什么这样有效？ #

• display: flex让.form-check变成flex容器，里面的单选按钮和标签文本都会成为flex项目；
• align-items: center会强制所有flex项目在垂直方向上居中对齐，不管文本是1行还是多行，都能自动适配；
• 去掉固定的margin-top和top值，避免了硬编码数值带来的适配问题，让布局更灵活。

如果不需要固定的最小高度，删掉min-height:85px就行，容器会根据文本内容自动调整高度，文本依然保持垂直居中~

备注：内容来源于stack exchange，提问作者Rahul B