Как выровнять текст вертикально по центру в css
Перейти к содержимому

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

  • автор:

Вертикальное выравнивание

Легко изменяйте параметры вертикального выравнивания встроенных элементов, встроенных блоков, таблиц и элементов ячейки таблицы.

Измените выравнивание элементов с помощью утилит вертикального выравнивания . Обратите внимание, что вертикальное выравнивание влияет только на встроенные элементы, встроенные блоки, встроенные таблицы и элементы ячейки таблицы.

Выбирайте из .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom и .align-text-top при необходимости.

С встроенными элементами:

baseline top middle bottom text-top text-bottom

 class="align-baseline">baseline  class="align-top">top  class="align-middle">middle  class="align-bottom">bottom  class="align-text-top">text-top  class="align-text-bottom">text-bottom 

С ячейками таблицы:

baseline top middle bottom text-top text-bottom
 style="height: 100px;">   class="align-baseline">baseline  class="align-top">top  class="align-middle">middle  class="align-bottom">bottom  class="align-text-top">text-top  class="align-text-bottom">text-bottom   

Как вертикально центрировать текст с помощью CSS

Довольно часто выравнивание элементов по горизонтали может представлять трудность. Но есть много способов вертикального центрирования, которые очень легко применяются.

Используйте свойство vertical-align

Свойство vertical-align используется для вертикального центрирования строчных элементов.

Значения для vertical-align выравнивают элемент относительно родительского элемента.

  • Значения line-relative вертикально выравнивают элемент относительно всей строки.
  • Значения для ячеек таблицы относительны к table-height-algorithm, который обычно указывает на высоту строки.

Не работает со старыми версиями IE. Решением является добавление child .

Пример

html> html> head> title>Заголовок документа title> style type="text/css"> div < display: table-cell; width: 250px; height: 200px; padding: 10px; border: 3px dashed #1c87c9; vertical-align: middle; > style> head> body> div>Вертикально выровненный текст div> body> html>

Используйте CSS Flexbox

С Flexbox можно выровнять элементы по вертикали или по горизонтали с помощью свойств align-items, align-self, и justify-content.

Читайте наше Руководство Flexbox, чтобы научиться, как создать flexible layout, оптимизированный для разных устройств.

Пример

html> html> head> title>Заголовок документа title> style> section < display: flex; width: 50%; height: 200px; margin: auto; border-radius: 10px; border: 3px dashed #1c87c9; > p < margin: auto; /* Important */ text-align: center; > style> head> body> section> p> Центрирован с помощью Flexbox. p> section> body> html>

flexbox layout flexbox layout

Используйте CSS display:table

В данном методе мы отобразим элементы как таблицы и ячейки таблиц, и контент будет центрирован с помощью свойства vertical-align .

Пример

html> html> head> title>Заголовок документа title> style> #parent < display: table; width: 100%; height: 200px; border: 3px dashed #1c87c9; text-align: center; > #child < display: table-cell; vertical-align: middle; > style> head> body> div id="parent"> div id="child">Вертикально центрирован. div> div> body> html>

Не работает со старыми версиями IE. Добавьте child .

Используйте свойство line-height

Данный метод может быть использован для вертикального центрирования одной строки текста. Добавьте свойство line-height к элементу, содержащему текст, где высота строки больше, чем размер шрифта. По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста, и получится вертикально центрированный текст.

Пример

html> html> head> title>Заголовок документа title> style> p < height: 90px; line-height: 90px; text-align: center; border: 3px dashed #1c87c9; > style> head> body> p>Вертикально центрирован. p> body> html>

Следующий метод работает для одной строки или же нескольких строк текста, но этот метод требует фиксированной высоты контейнера.

Пример

html> html> head> title>Заголовок документа title> style> div < display: inline-block; width: 100%; height: 200px; vertical-align: middle; line-height: 200px; text-align: center; border: 3px dashed #1c87c9; > style> head> body> div>Вертикально центрирован. div> body> html>

Задайте равные верхние и нижние отступы

В этом методе верхние и нижние отступы родительского элемента будут равными

Пример

html> html> head> title>Заголовок документа title> style> .center < padding: 10% 0; border: 3px dashed #1c87c9; > style> head> body> div class="center"> p>Вертикально центрирован. p> div> body> html>

Если нужно задать отступы, используйте %. Данный метод требует некоторые вычисления, чтобы понять, какие значения необходимо установить для top и bottom для их динамического роста. Если установить относительную высоту, вычисления не потребуются.

Задайте абсолютное позиционирование и отрицательные поля

Этот метод используется с блочными элементами. Не забудьте установить высоту элемента, которую хотите центрировать.

  1. Задайте #parent и #child
  2. Задайте top: 50%; и left: 50%; для центрирования левого края child .
  3. Задайте child и таким образом, чтобы он перемещался вверх и налево.
  4. Установите отрицательное поле, оно уменьшает наполовину высоту и толщину.

Пример

html> html> head> title>Заголовок документа title> style> .parent < position: relative; width: 100%; height: 220px; background: #1faadb; color: #fff; > .child_1, .child_2 < position: absolute; top: 50%; left: 50%; width: 110px; height: 70px; background: #8ebf42; text-align: center; > .child_1 < margin: -35px 0 0 -55px; > style> head> body> div class="parent"> div class="child_1">Вертикально центрированный текст. div> div> br> div class="parent"> div class="child_2">Нецентрированный текст. div> div> body> html>

Если контент становится больше контейнера, он визуально исчезнет.

Задайте абсолютное позиционирование и растягивание

С помощью этого метода, мы указываем, чтобы браузер автоматически задал поля дочернего элемента таким образом, чтобы они стали равными.

  1. Задайте parent и child
  2. Задайте child
  3. Задайте 4 margin: auto; все поля станут равными и child станет центрированным по вертикали, а также по горизонтали.

Пример

#parent < position: relative; > #child < position: absolute; top: 50%; left: 50%; width: 50%; height: 30%; margin: -15% 0 0 -25%; >

Данный метод не работает в IE7.

Задайте свойство transform

Если мы имеем position: absolute; left: 50%; top: 50%;, вычисления делаются с левого верхнего угла. Для центрированного позиционирования текста необходимо переместить текст на -50% налево и на 50% вверх с помощью transform: translate (-50%;-50%).

Пример

html> html> head> title>Заголовок документа title> style> .parent < position: relative; width: 100%; height: 220px; background: #1faadb; color: #fff; > .child_1, .child_2 < position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; padding: 5px; background: #8ebf42; text-align: center; > .child_1 < transform: translate(-50%, -50%); > style> head> body> div class="parent"> div class="child_1">Вертикально центрированный текст. div> div> br> div class="parent"> div class="child_2">Нецентрированный текст. div> div> body> html>

Используйте floater div

Этот метод требует пустой div, который будет floated.

Этот метод требует пустой div.

  1. Float: floater слева или справа.
  2. Задайте Height: 50%;
  3. Пустой дочерний элемент.
  4. Очистите child , используя clear: property.

Необходимо выставить дочерний элемент на расстоянии, равной половину высоты. Для этого нужно задать отрицательные значения свойства margin-bottom: на floater

Пример

#parent < height: 200px; > #floater < float: left; width: 100%; height: 50%; margin-bottom: -50px; outline: 2px solid #1c87c9; > #child < clear: both; height:100px; outline: 2px solid #8ebf42; >

Не забудьте про пустой div и задайте высоту для дочернего элемента.

Вертикальное и горизонтальное выравнивание текста по центру (Grid CSS)

Данные два текста нормально выглядят в блоках(они выровнялись по центру), но остальной текст в блоках не выравнивается по центру. Как в остальных блоках выровнять текст по центру вертикально и горизонтально.

.Сategory_Main_Block < padding-top: 2vw; padding-bottom: 2vw; display: grid; grid-template-columns: repeat(6, 15.5%); grid-template-rows: repeat(2, max-content); column-gap: 1vw; row-gap: 2vw; margin-left: 2vw; >.Сategory_Block_1 < background: #20B2AA; border-radius: 1.5vw; margin: 0; >.Сategory_img_1 < background: gray; border-top-right-radius: 1.5vw; border-top-left-radius: 1.5vw; width: 100%; height: 12vw; >.Сategory_name_1
 
ПЕС И ЛИСА ИГРАЛИСЬ ВО ДВОРЕ ДО УТРА НОЧИ ЕЛИ КОНЕЙ
ХАДО 90
ЭКОНОМИКА
КОСТЕР И СВЕТ
ДЯДЯ ФЕДОР
ШАНХАЙ
БРАТВА
ОФИЦИАЛЬНО
ТЕРЕМОК И БЕЛЫЙ КОСТЕР ЕЛИ КОШКУ ЗАТЕМ ЕЛИ ЧЕЛОВЕКА У КАМИНА
МОЛНИЯ
КОРЕШКИ
ЮГ МАГНИТА

Вертикальное выравнивание на CSS, line-height и vertical-align middle

11.07.18 ИТ / CSS 4698

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

Раньше страницы верстались при помощи таблиц (табличная верстка), сейчас же принято использовать блочную верстку на основе тегов div (блочная верстка). Это значит, что таблицы сегодня лучше не использовать для создания блоков, хотя выровнять содержимое ячейки таблицы раньше было совсем просто, чего не сказать о выравнивании в блоке div. При табличной верстке активно использовали атрибут valign.

Но решения есть. Для вертикального выравнивания в элементах можно использовать некоторые методы. Например, метод line-height. Он больше подойдет для выравнивания строки текста. Данный метод работает во всех браузерах. Значение 100px в этом примере выбрано произвольно, подберите нужное для себя самостоятельно, в зависимости от потребностей.

 
Строка текста
.child

Другой способ заключается в следующем. Если для выравнивания содержимого блока по горизонтали служит CSS свойство text-align: center, то для вертикального выравнивания есть свойство vertical-align: middle. Это свойство работает только для строчных элементов, но можно адаптировать и для блочных. Это ответ на вопрос, почему не работает vertical-align: middle, который часто можно встретить на различных форумах и порталах. Нужно сделать специальный стиль отображения такого блока с помощью свойства display, пример ниже:

 
Содержимое
.parent < display: table; >.child

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *