Блог

В настоящее время у меня есть этот раздел, и они на самом деле не выровнены. Я хочу, чтобы каждый элемент был выровнен по соседству с ним.

Как вы можете видеть выше, значки, заголовок и описание не выровнены, так как это зависит от значков.

Ниже приведен мой код:

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

Попробуйте добавить это в свой .шаги-значки-раздел css.

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

Он должен выровнять их по нижней части div.