Как вертикально выровнять весь текст в css?

Пользователь

от ella , в категории: HTML/CSS , год назад

Как вертикально выровнять весь текст в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dorothea_stoltenberg , год назад

@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 , 6 месяцев назад

@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; /* Выравнивание текста по центру по вертикали */
}


Этот метод также позволяет вертикально выравнивать текст внутри блока.