如何对齐列中的图标、数字和文本？

Question

使用下面的代码，我只能将图标、数字和文本放在对齐尚未修复的列中。我不知道该怎么做。您能告诉我如何对齐第一列吗，如下图所示。

我能达到的效果如下所示。

HTML是：

      <div class="row impact-section">  
       <div id="shopify-section-impact" class="shopify-section"><h2>Our Gifts Create an Impact</h2>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         <div><img src="http://cdn.shopify.com/s/files/1/0505/7645/7884/files/160_000_-_People.png?v=1633076419"></div>
         <div>160,000</div>
         <div>Lives impacted last year across 28 states and 35 countries</div>
        </div>

        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         <div><img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/30_-_Diverse.png?v=1633087230"></div>
         <div>30%</div>
         <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
        </div>

        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         <div><img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/50_000_-_Workforce.png?v=1633087275"></div>
         <div>50,000+</div>
         <div>Hours of training provided for youth and adults with employment barriers</div>
        </div>
        <div class="mt2x btn center-xs col-sm-12 col-md-12 col-lg-12 col-xl-12"><a role="button" href=""><button>Learn More About our Impact</button></a></div>
       </div>
      </div>

Answer 1

我认为这就是您想要实现的目标。如图所示。

.wrapper{
  display:flex;
  justify-content:space-around;
  align-items:center;
  
}


.bold{
  font-weight:900;
  font-size:25px;
}


.button{
  margin-top:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="row impact-section">  
       <div id="shopify-section-impact" class="shopify-section"><h2>Our Gifts Create an Impact</h2>
         <div class="wrapper">
         <div><img src="http://cdn.shopify.com/s/files/1/0505/7645/7884/files/160_000_-_People.png?v=1633076419"></div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         
          <div class="bold">160,000</div>
         <div>Lives impacted last year across 28 states and 35 countries</div>
          
        </div>
  <div><img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/30_-_Diverse.png?v=1633087230"></div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         
          
         <div class="bold">30%</div>
            <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
        </div>
<div><img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/50_000_-_Workforce.png?v=1633087275"></div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
         
         <div class="bold">50,000+</div>
          <div>Hours of training provided for youth and adults with employment barriers</div>
        </div>
           </div>
        <div class="mt2x btn center-xs col-sm-12 col-md-12 col-lg-12 col-xl-12 button"><a role="button" href=""><button>Learn More About our Impact</button></a></div>
       </div>
      </div>

Answer 2

我们的礼物会产生影响

.items{
display:flex;
}
.content{
    display: flex;
    align-items: center;
}

<div class="row impact-section">
    <div id="shopify-section-impact" class="shopify-section"><h2>Our Gifts Create an Impact</h2>
       <div class="items">
           <div class="content col-sm-12 col-md-4 col-lg-4 col-xl-4">
               <img src="http://cdn.shopify.com/s/files/1/0505/7645/7884/files/160_000_-_People.png?v=1633076419">
               <div>
                   <div>160,000</div>
                   <div>Lives impacted last year across 28 states and 35 countries</div>
               </div>
           </div>
           <div class="content col-sm-12 col-md-4 col-lg-4 col-xl-4">
               <img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/30_-_Diverse.png?v=1633087230">
               <div>
                   <div>30%</div>
                   <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
               </div>

           </div>
           <div class="content col-sm-12 col-md-4 col-lg-4 col-xl-4">

               <img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/50_000_-_Workforce.png?v=1633087275">
               <div>
                   <div>50,000+</div>
                   <div>Hours of training provided for youth and adults with employment barriers</div>
               </div>
           </div>
       </div>
        <div class="mt2x btn center-xs col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <a role="button" href=""><button>Learn More About our Impact</button></a>
        </div>
    </div>
</div>

="内容 col-sm-12 col-md-4 col-lg-4 col-xl-4"> http://cdn.shopify.com/s/files/1/0505/7645/7884/files/160_000_-_People.png?v=1633076419 160,000 去年 28 个州和 35 个国家的生活受到影响 30% PwP 的供应商企业中女性和多元化企业的比例

       </div>
       <div class="content col-sm-12 col-md-4 col-lg-4 col-xl-4">

           <img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/50_000_-_Workforce.png?v=1633087275">
           <div>
               <div>50,000+</div>
               <div>Hours of training provided for youth and adults with employment barriers</div>
           </div>
       </div>
   </div>
    <div class="mt2x btn center-xs col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <a role="button" href=""><button>Learn More About our Impact</button></a>
    </div>
</div>

如何对齐列中的图标、数字和文本？

How to align icon, number and text in a column?

html

css

frontend

我们的礼物会产生影响