1

Выравниваю блоки с помощью flex контейнера. Получается такая ситуация:

Когда в одном из них текст перемещается на следующую строку - все остальные блоки тоже становятся выше, при этом текст остаётся сверху, нужно, чтобы был по центру. Подскажите, как выровнять текст в этих блоках по вертикальному центру? введите сюда описание изображения

Код:

 <div style="padding: 15px; text-align: center; font-weight: bold; background: black; color: white;  flex-wrap: wrap; display: flex;   justify-content: space-around; ">

 <div style="width: 20%; text-align: center; border: 1px solid red;">NATIVE GROUP HDHFJFJFJFJF DJRKTKTK</div>

 <div style="width: 20%; text-align: center; border: 1px solid red">КУРСЫ</div>

 <div style="border: 1px solid red; width: 20%; text-align: center; padding: 2px; border: 1px solid #1AB488; border-radius: 20%; color: #1AB488">Sign Up</div>

 </div>
2
  • align-items: center 23 дек 2019 в 17:30
  • Да, но в таком случае размеры блоков тоже уменьшаются. Нужно чтобы они были одинаковыми, но текст по центру 23 дек 2019 в 17:37

1 ответ 1

0

.inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.inner div {
  width: 100%;
}

.wrap {
  width: 20%;
  text-align: center;
  border: 1px solid red;
}
<div style="padding: 15px; text-align: center; font-weight: bold; background: black; color: white;  flex-wrap: wrap; display: flex;   justify-content: space-around; ">

  <div class="wrap">
    <div class="inner">
      <div>NATIVE GROUP HDHFJFJF DJRKTKTK GROUP HDHFJFJF DJRKTKTE GROUP HDHFJFJF 
      </div>
    </div>
  </div>

  <div class="wrap">
    <div class="inner">
      <div>КУРСЫ</div>
    </div>
  </div>

  <div class="wrap">
    <div class="inner">
      <div>Sign Up</div>
    </div>
  </div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.