在 flex div 中居中输入[复选框]

Question

我正在制作一个带有一些过滤器的侧边菜单，为此我需要创建一行，其中包含输入复选框，旁边还有一些文本。我的问题是，当文本太大时，复选框不会在 flex 容器中居中。我尝试使用

align-items: baseline

但是没用。

当前：

预计：

<div class="container" style="width:100px; height: 40px;">
  <div class="little-container mt-3">
    <div class="d-flex flex-row align-items-baseline">
      <input type="checkbox" />
      <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>

这是我的 fiddle 我正在使用 bootstrap 4 https://jsfiddle.net/ccastro95/5qc2w1n4/7/

谢谢。

Answer 1

而不是

<div class="d-flex flex-row align-items-baseline">

使用：

<div class="d-flex flex-row" style="align-items:center">

我建议看看 CSS Tricks 关于 flexbox 的精彩资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

<div class="d-flex align-items-center">

将显示块添加到跨度

<span class="d-block">

在 flex div 中居中输入[复选框]

Center input[checkbox] in flex div

css

checkbox

flexbox

bootstrap-4