Не получается vertical align в сетке Bootstrap4?

Question

[ivankalita]

Вроде и контейнер есть, даже высота у него больше чем у строки, которая в нем. Вот горизонтальное выравнивание никогда вопросов не задавало, а с вертикальным бьюсь и понимаю, что я что-то не улавливаю, помогите плиз, я усталь)))

Answer 1

[Сергей Карвасарный]

похоже что как-то так
.row
.col-xl-6align-self-center
.col-xl-6align-self-center
/row

Comments

[ivankalita]

Сейчас попробую, вы ведь имеете ввиду align-self-center добавить к каждой из 7 col, которые обернуты в row?
Попробовал, не получилось Сергей Карвасарный, у меня есть подозрение, что align-self-center не хочет работать потому, что у row высота такая же как у этих col-ов.
Тут фишка именно в том, чтобы row центрировать в container и будет мне счастье, но align-item-center не хочет работать без явного указания ему d-flex, но при указании все идет по П***е))

[Сергей Карвасарный]

ivankalita, я так понимаю тебе так нужно

[ivankalita]

Видишь, у тебя высота container = row, и за счет этого ты уже выравниваешь col-ы по вертикали..
Сейчас пришлю еще фото

Если сравнивать с предыдущей, то там у containera и row приличная разница в высоте, т.е. row свою высоту подстраивает под высоту наибольшего cola в себе (у тебя так же получилось в примере)

[Сергей Карвасарный]

ivankalita, Ссылка на сайт есть? row> height: 100%; Типа такого надо в живую лучше смотреть.

[ivankalita]

Сергей Карвасарный, я его у себя на пеке верстаю, даже не знаю, как подогнать то, чтобы показать

[Сергей Карвасарный]

ivankalita, codpen туда верхний блок + стили залей и все

[ivankalita]

https://codepen.io/ivankalita_/pen/KOxLLq, там даже стили не пришлось заливать, их особо кроме картинки на заднем фоне и нет)

[Сергей Карвасарный]

ivankalita, 404 (Page Not Found)

[ivankalita]

сук)
БРО, я отказываюсь понимать, как это работает, но я сейчас сделал container h-25, дочерний row h-100 (ну чтобы он максимальное место занял), row добавил align-items-center, который ставил еще в начале вопроса своего и все заработало
ПЗЦ, как это работает, в доках Bootstrap строка меньше по высоте своего родительского контейнера и она align-items-center идеально центрируется 0_о

[Сергей Карвасарный]

ivankalita, h-100 помог)) я же писал сделай height: 100%)

[ivankalita]

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

[Сергей Карвасарный]

ivankalita, в доках они примеры более очевидных вещей приводят) а h-100 это понятно же было) блок 1 типа у тебя 300 px а потом идет row и col- и чтобы в блок 1 отцентрировать нужно row сделать такую же высоту как и блоку 1))

[ivankalita]

Вот, бл, я не пойму логики. Я это вижу как: блок 1 - 300рх, второй - 100рх, даешь команду второму центрироваться относительно первого, ну и он сам накидывает сверху и снизу по 100рх, вот и отцентрировался.
А твой (правильный) вариант получается слудующим образом: блок 1 - 300рх, второй - 300рх, центрируешь второй относительно первого, херак и содержимое блока 2 по центру встало, вот как?!?!?!?)))

[Сергей Карвасарный]

ivankalita, просто сделай сетку с пару блоков и поэксперементируй меняя классы и разберешься) методом тыка как говориться))

[ivankalita]

Согласен, ну, спасибо, за всё, успехов)