flex div中的中心输入[复选框] [重复]

Posted 2023-03-21

【中文标题】flex div中的中心输入[复选框] [重复]

【英文标题】：Center input[checkbox] in flex div [duplicate]

【发布时间】：2021-10-20 21:45:45

【问题描述】：

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

对齐项目：基线

但是没有用。

当前：

预期：

<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>

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

谢谢。

【问题讨论】：

align-items-center 而不是 align-items-baseline

【参考方案1】：

代替

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

使用：

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

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

【参考方案2】：

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

将显示块添加到跨度

<span class="d-block">

【讨论】：

你不需要使用 flex-row，因为它是默认的。

你不需要阻止垃圾邮件，因为它是一个弹性项目

啊对！没错