Необходимо выровнять по центру изображения

Question

Необходимо, чтобы секция отображалась следующим образом:

Но с текстом (абзацами p) стрелки спускаются ниже центра и получается вот так:

Что я упустил/какова моя ошибка? Благодарю заранее.

<section class="process">
        <div class="process__heading">
            <h1>Как мы работаем</h1>
            <img src="./images/red-line.png" alt="red-line">
            <p class='warning'>Возможно оформление йога-тура дистанционно из любого города</p>
        </div>
        <div class="process__steps">
            <div class="step-1">
                <img src="./images/form.png" alt="form-image">
                <p>Вы оставляете заявку</p>
                <a class = 'process__link' href="#">Отправить заявку</a>
            </div>
            <div class="arrow">
                <img src="./images/arrow-icon.png" alt="">
            </div>
            <div class="step-2">
                <img src="./images/phone-call.png" alt="phone-image">
                <p>Мы связываемся с вами</p>
            </div>
            <div class="arrow">
                <img src="./images/arrow-icon.png" alt="">
            </div>
            <div class="step-3">
                <img src="./images/document.png" alt="document-image">
                <p>Подписываем договор и оформляем документы</p>
            </div>
            <div class="arrow">
                <img src="./images/arrow-icon.png" alt="">
            </div>
            <div class="step-4">
                <img src="./images/wallet.png" alt="wallet-image">
                <p>Вы оплачиваете аванс 6 000 рублей в банке</p>
            </div>
            <div class="arrow">
                <img src="./images/arrow-icon.png" alt="">
            </div>
            <div class="step-5">
                <img src="./images/ticket.png" alt="ticket-image">
                <p>Покупаете билеты и оформляете визу (возможно через нас)</p>
            </div>
            <div class="arrow">
                <img src="./images/arrow-icon.png" alt="">
            </div>
            <div class="step-6">
                <img src="./images/meeting.png" alt="meeting-image">
                <p>Вас встречают в аэропорту Тривандрум с табличкой</p>
            </div>
        </div>
    </section>

.process {
  height: auto;
  padding-bottom: 50px;
}
.process__heading .warning {
  font-family: "Muller";
  font-weight: normal;
  font-size: 1.5rem;
  font-style: italic;
  padding-top: 50px;
}
.process__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 70px;
  text-align: center;
  font-family: "Muller";
  font-weight: normal;
}
.process__steps p {
  margin-top: 20px;
}

Answer 1

.process {
  height: auto;
  padding-bottom: 50px;
}

.process__heading .warning {
  font-family: "Muller";
  font-weight: normal;
  font-size: 1.5rem;
  font-style: italic;
}

.process__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  margin-top: 70px;
  text-align: center;
  font-family: "Muller";
  font-weight: normal;
  justify-content: center;
  flex-basis: auto;
  width: min-content;
  margin: 0 auto;
}

.process__steps p {
  margin-top: 20px;
}

.step,
.arrow {
  margin: 0 20px 0 0;
}

.warning,
.process__heading,
h1 {
  text-align: center;
}

<section class="process">
  <div class="process__heading">
    <h1>Как мы работаем</h1>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Wave_Dash2.svg/75px-Wave_Dash2.svg.png" alt="red-line">
    <p class='warning'>Возможно оформление йога-тура дистанционно из любого города</p>
  </div>
  <div class="process__steps">
    <div class="step step-1">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="form-image">
      <p>Вы оставляете заявку</p>
      <a class='process__link' href="#">Отправить заявку</a>
    </div>
    <div class="arrow">
      <img src="https://federal-goshow.ru/wp-content/uploads/2019/10/strelka2png.png" alt="">
    </div>
    <div class="step step-2">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="phone-image">
      <p>Мы связываемся с вами</p>
    </div>
    <div class="arrow">
      <img src="https://federal-goshow.ru/wp-content/uploads/2019/10/strelka2png.png" alt="">
    </div>
    <div class="step step-3">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="document-image">
      <p>Подписываем договор и оформляем документы</p>
    </div>
    <div class="arrow">
      <img src="https://federal-goshow.ru/wp-content/uploads/2019/10/strelka2png.png" alt="">
    </div>
    <div class="step step-4">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="wallet-image">
      <p>Вы оплачиваете аванс 6 000 рублей в банке</p>
    </div>
    <div class="arrow">
      <img src="https://federal-goshow.ru/wp-content/uploads/2019/10/strelka2png.png" alt="">
    </div>
    <div class="step step-5">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="ticket-image">
      <p>Покупаете билеты и оформляете визу (возможно через нас)</p>
    </div>
    <div class="arrow">
      <img src="https://federal-goshow.ru/wp-content/uploads/2019/10/strelka2png.png" alt="">
    </div>
    <div class="step step-6">
      <img src="https://sun3-10.userapi.com/SUpuzLjynE9U6qCmsX-0wOTyiA7uVF6DAx3Qhg/TGKW30blFlg.jpg?ava=1" alt="meeting-image">
      <p>Вас встречают в аэропорту Тривандрум с табличкой</p>
    </div>
  </div>
</section>

Answer 2

Вам нужно не выравнивать изображения по центру, а прижать их к верхней границе .process__steps. Добавьте к .process__steps стили.

-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;

БЛОГ НА HUSL

Необходимо выровнять по центру изображения

Ответы (2 шт):