Как вертикально выровнять весь текст в css?
2 ответа
от
dorothea_stoltenberg ,
2 года назад
@ella
Вы можете использовать свойство display: flex; вместе с align-items: center;, чтобы вертикально выровнять весь текст внутри блока.
Пример:
HTML:
1 2 3 |
<div class="container"> <p class="text">Ваш текст</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 |
.container {
display: flex;
align-items: center;
height: 100vh; /* Нужная высота контейнера */
}
.text {
margin: auto; /* Центрирование текста */
}
|
В результате весь текст внутри блока будет вертикально выравнен по центру блока.
от
stephon ,
год назад
@ella
Для выравнивания текста по вертикали внутри блока без использования flexbox, вы можете использовать следующий способ:
HTML:
1 2 3 |
<div class="container"> <p class="text">Ваш текст</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 |
.container {
display: table;
height: 100vh; /* Нужная высота контейнера */
width: 100%; /* Ширина контейнера */
text-align: center; /* Выравнивание текста по центру по горизонтали */
}
.text {
display: table-cell;
vertical-align: middle; /* Выравнивание текста по центру по вертикали */
}
|
Этот метод также позволяет вертикально выравнивать текст внутри блока.
15