В Bootstrap 4 не работает вертикальное выравнивание (align-items) по центру, почему?

Question

[Дима]

Не нашел ответа на этот вопрос, вот такой код есть

<div class="container">
  <div class="form__submit d-flex align-items-center">
    <a href="#" class="btn-lg btn btn-primary">Отправить</a>
    <p>Нажимая кнопку «Отправить», вы соглашаетесь с <a href="#">политикой обработки персональных данных</a></p>
  </div>
</div>

Кнопка все равно выровнена по верхней границе (flex-start). В чем может быть дело? Код в песочнице.

Заранее спасибо.

Answer 1

[Andrew]

Ну так у вас у элемента-родителя(.form_submit) высота 64 пикселя - кнопка по центру. Сделайте высоту больше - увидите.
В этом случае флекс-старт и центр примерно равны.

Comments

[Дима]

Да, если сделать высоту больше, то все работает. Но непонятно почему не работает с текущей высотой, ведь если сделать без бутсрапа, но на флексах то все окей.

[Andrew]

Дима Волков, так и что поменялось?
Вертикальное выравнивание работает, выравнивает относительно высоты элемента-родителя.
Причем тут бутстрап и не-бутстрап?

[Дима]

Оно не работает с бутстрап-классом

<div class="form__submit d-flex align-items-center">

, я хочу узнать почему.

[Andrew]

Дима Волков, Для меня, в том что было до изменения и сейчас - нет разницы. Разве что !импортанты убрались. Вы не пробовали в консоль залезть и потестить, что, как, почему и откуда?

[Дима]

Andrew, проблема была в том, что bootstrap обнуляет margin-top у p.

[Andrew]

Дима Волков, вопрос был, вроде, почему флексы не выравниваются по центру? О_о
не ну если вы нашли в этом проблему...