Вертикальный центр на гибкой компоновке

99
9

Я использую класс.vertical-align-center для содержимого div внутри столбца bootstrap 3.

Если высота столбца фиксирована, поэтому она больше, чем высота содержимого, или если другой столбец в той же строке имеет больший контент, который делает высоту больше, чем содержание, все работает нормально.

Но на более мелких устройствах ширина столбца равна 12, поэтому столбец имеет высоту жидкости, которая совпадает с содержимым. Это делает контент удаляемым -50% сверху.

Есть идеи, как это решить?

.vertical-align-center {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
<div class="column col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="column-content vertical-align-center">
<h3>Heading</h3>
<p>Some text</p>
</div>
</div>

спросил(а) 2021-01-25T20:44:35+03:00 4 месяца, 4 недели назад
1
Решение
99

Вы можете использовать flex для этого решения. подобно

body,html {
height: 100%;
}

.Aligner {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

<div class="Aligner">
<div class="Aligner-item">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, qui.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed itaque voluptatum fuga aspernatur consectetur ipsum porro corporis autem commodi totam beatae atque doloremque possimus hic sunt, dolores ullam quod ducimus.</p>
</div>
</div>

ответил(а) 2021-01-25T20:44:35+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема