如何使图像、文本和描述部分对齐？

Question

我目前有这个部分，但它们并没有真正对齐。我想让每个元素与它旁边的元素对齐。

正如您在上面看到的，图标、标题和描述没有对齐，因为它受图标的影响。

下面是我的代码：

<div class="steps-icons">
     <div class="steps-icons-section steps-icons-first">
          <img src="{{media url=wysiwyg/landing_page/how_it_works/You_Pick_It_Icon.png}}" alt="You pick it" />
          <h6> You Pick It </h6>
          <p> Select a box option based on your craving </p>
     </div>
     <div class="steps-icons-section steps-icons-second">
          <img src="{{media url=wysiwyg/landing_page/how_it_works/We_Build_It_Icon.png}}" alt="We build it" />
          <h6> We Build It </h6>
          <p> We create your box with the names and flavors you love </p>
     </div>
     <div class="steps-icons-section steps-icons-third">
          <img src="{{media url=wysiwyg/landing_page/how_it_works/Delivered_Icon.png}}" alt="Delivered Icon" />
          <h6> Delivered </h6>
          <p> No more runs to the gas station or over paying </p>
     </div>
</div>

CSS

/* How it works */
.steps-icons {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .steps-icons {
        flex-direction: column;
        display: block;
    }
}
.steps-icons-section {
    flex: 1;
    margin: 20px 20px 20px;
    padding: 20px 20px 20px;
    text-align: center;
}

Answer 1

尝试将此添加到您的 .steps-icons-section css。

.steps-icons-section {
    position: absolute;
    bottom: 0;
}

它应该将它们与 div 的底部对齐。