jeudi 19 août 2021

Center input[checkbox] in flex div

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:

enter image description here

Expected:

enter image description here

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




Aucun commentaire:

Enregistrer un commentaire