如何在列中对齐图标、数字与文本？现有HTML布局对齐问题求解

要实现所有列的图标、数字、描述文本分别对齐，用Flex布局就能解决，你用的是Bootstrap栅格系统，两种方案可选：

方案1：添加自定义CSS #

把以下代码加入你的样式文件即可：

/* 让每个列容器成为垂直弹性盒，高度统一占满父容器高度 */
.impact-section .col-md-4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 24px;
}
/* 给图标容器设置固定高度，保证所有图标水平对齐 */
.impact-section .col-md-4 > div:first-child {
  height: 60px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
/* 统一数字的间距，保证所有数字水平对齐 */
.impact-section .col-md-4 > div:nth-child(2) {
  margin-bottom: 12px;
}
/* 让描述文本自动占满剩余高度，保证所有卡片底部对齐 */
.impact-section .col-md-4 > div:nth-child(3) {
  flex-grow: 1;
}
/* 统一图标最大高度，避免图标大小不同导致错位 */
.impact-section .col-md-4 img {
  max-height: 100%;
  width: auto;
}

方案2：直接用Bootstrap自带工具类，无需写额外CSS #

修改每个列容器的类，以及内部元素的类即可，示例如下：

<div class="row impact-section">  
  <div id="shopify-section-impact" class="shopify-section">
    <h2>Our Gifts Create an Impact</h2>
    <div class="row"> <!-- 额外加一层row包裹三个列，保证等高生效 -->
      <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column h-100 mb-4">
        <div class="d-flex align-items-center mb-4" style="height:60px">
          <img src="http://cdn.shopify.com/s/files/1/0505/7645/7884/files/160_000_-_People.png?v=1633076419" style="max-height:100%;width:auto">
        </div>
        <div class="mb-3">160,000</div>
        <div class="flex-grow-1">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 d-flex flex-column h-100 mb-4">
        <div class="d-flex align-items-center mb-4" style="height:60px">
          <img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/30_-_Diverse.png?v=1633087230" style="max-height:100%;width:auto">
        </div>
        <div class="mb-3">30%</div>
        <div class="flex-grow-1">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 d-flex flex-column h-100 mb-4">
        <div class="d-flex align-items-center mb-4" style="height:60px">
          <img src="https://cdn.shopify.com/s/files/1/0505/7645/7884/files/50_000_-_Workforce.png?v=1633087275" style="max-height:100%;width:auto">
        </div>
        <div class="mb-3">50,000+</div>
        <div class="flex-grow-1">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">
      <a role="button" href=""><button>Learn More About our Impact</button></a>
    </div>
  </div>
</div>

注：记得给三个列外层加一层row容器，才能保证h-100等高属性正常生效。

内容的提问来源于stack exchange，提问作者CodeForGood