垂直对齐图标与文本中心问题引导

Question

我和中心有问题。我想居中图标和文字在同一条线上与引导，但它不工作的好。我是这里的初学者，所以我知道的不多。想要这个:示例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

试试这个，我想这个会管用的

​

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

​

Answer 2

试试这个

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

我使用字体很棒的图标，您可以用适合您的图像tag.Hope替换它:)