带有文本中心问题的垂直对齐图标 Bootstrap

Question

I have problems with center. I want to center icon and text on the same line with Bootstrap but its not working good. I am beginner here so I dont know much. Wanted this: Example https://i.stack.imgur.com/prSlD.png

My code what i have tried:


 <section class="container-fluid bg-dark text-center">
    <h2>WHY US</h2>
    <div class="d-flex align-items-center">
      <img class=" me-3" src="img/icon.png"style="width:40px" alt="">
      <h5 class="mb-0">FAST DELIVERY  </h5>
    </div>
  </section>

Answer 1

Try adding d-flex align-items-center justify-content-center to your section tag

 <section class="container-fluid bg-dark d-flex align-items-center justify-content-center"> <h2>WHY US</h2> <div class="d-flex align-items-center"> <img class=" me-3" src="img/icon.png"style="width:40px" alt=""> <h5 class="mb-0">FAST DELIVERY </h5> </div> </section>

Answer 2

Try this one

   <div class="container-fluid">
    <div class="d-flex flex-column align-items-center">
        <h2>WHY US ?</h2>
        <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            <h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            <h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            <h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            <h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
    </div>

I have use font awesome icon you can replace it with your image tag.Hope that work for you:)