Center input[checkbox] in flex div

Question

I'm making a side menu with some filters, for this purpose I need to create a row that has input checkbox and next to it some text. My problem is that when the text is too big the checkbox doesn't center in the flex container. I tried using

align-items: baseline

but it didn't work.

Current:

Expected:

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

Here is my fiddle I'm using bootstrap 4 https://jsfiddle.net/ccastro95/5qc2w1n4/7/

Thank you.

`align-items-center` instead of `align-items-baseline` – Suresh Ponnukalai Aug 19 '21 at 07:32 — Suresh Ponnukalai, Aug 19 '21 at 07:32

score 1 · Answer 1 · answered Aug 19 '21 at 07:22

1

Instead of

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

use:

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

I recommend taking a look at CSS Tricks' fantastic resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Aug 19 '21 at 07:22

Alexander van Oostenrijk

4,644
3
23
37

score 1 · Accepted Answer · answered Aug 19 '21 at 07:26

1

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

add display block to the span

<span class="d-block">

answered Aug 19 '21 at 07:26

Shafayet

163
7

you don't need to use flex-row as it is the default. – Shafayet Aug 19 '21 at 07:27
you don't need to make the spam block since it's a flex item – Temani Afif Aug 19 '21 at 08:57
ah right! tthats correct – Shafayet Aug 19 '21 at 10:44

Center input[checkbox] in flex div

2 Answers2