• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как вертикально центрировать текст CSS (Способы вертикального выравнивания по центру в CSS)
Как вертикально центрировать текст CSS
Kosten
Дата: Понедельник, 2019-06-03, 00:05 | Сообщение 1
Администраторы
Сообщений:22439
Награды: 56


Общей задачей CSS является центрирование текста или изображений по вертикали. Хотя CSS2 не поддерживает вертикальное выравнивание, где есть вариант, чтоб центрировать блоки по вертикали, комбинируя несколько свойств. Все основа заключена в том, чтобы указать, что внешний блок изначально должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть отцентрировано по вертикали.

CSS

Код
div.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
div {
  Начинающему вебмастеру
}




Более универсальный подход

Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но для него все еще требуется контейнер фиксированной высоты:

Код
div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
div{
  Начинающему вебмастеру
}




CSS просто изменяет размер div, выравнивая по центру по вертикали промежуток, устанавливая высоту строки div, равную его высоте, и делает промежуток встроенным блоком с vertical-align: middle. Затем он устанавливает высоту строки обратно на нормальный для диапазона, поэтому его содержимое будет течь естественным образом внутри блока.

Демонстрация
Прикрепления: 1185140.png(23.9 Kb) · 1546139.png(9.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как вертикально центрировать текст CSS (Способы вертикального выравнивания по центру в CSS)
  • Страница 1 из 1
  • 1
Поиск: