@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; /* Центрирование текста */ } |
В результате весь текст внутри блока будет вертикально выравнен по центру блока.
@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; /* Выравнивание текста по центру по вертикали */ } |
Этот метод также позволяет вертикально выравнивать текст внутри блока.