Bootstrap 4中Flex容器内Checkbox在长文本下无法垂直居中的问题求助

我帮你搞定这个问题啦！核心问题在于你用了align-items-baseline，当文本换行后，基线对齐会让checkbox跟着文本的最后一行基线走，自然没法垂直居中。咱们换个思路，用下面的代码就能解决：

<div class="container" style="width:100px; height: 40px;">
  <div class="little-container mt-3">
    <div class="d-flex flex-row align-items-center">
      <input type="checkbox" class="my-auto" />
      <span class="font-weight-bold flex-grow-1">Just a really big text Just a really big text Just a really big text Just a really big text</span>
    </div>
  </div>
</div>

关键调整点： #

• 把align-items-baseline替换成align-items-center：这会让Flex容器里的所有元素沿着垂直方向的中心对齐，不管文本有没有换行，都能保持居中状态。
• 给checkbox加上my-auto类：这个Bootstrap内置类会自动给checkbox设置上下margin为auto，抵消浏览器默认的checkbox样式带来的微小偏移，确保它完美居中。

如果想要checkbox和文本之间的间距更舒服，还可以给span标签加个ml-2类，增加一点左边距：

<span class="font-weight-bold flex-grow-1 ml-2">Just a really big text ...</span>

这样调整后，不管文本多长、换多少行，checkbox都会稳稳地待在容器的垂直中心位置啦～

内容的提问来源于stack exchange，提问作者César Castro Aroche