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

#1 22 января 2025 в 15:45

Сообщений: 11
Последний визит: 6 марта 2025 в 11:51

У меня есть <div> элемент, содержащий текст, и я хочу выровнять содержимое этого <div> вертикально по центру.

Вот мой <div> стиль:

#box {   height: 170px;   width: 270px;   background: #000;   font-size: 48px;   color: #FFF;   text-align: center; }

<div id="box">   Lorem ipsum dolor sit </div>

Как лучше всего достичь этой цели?

#2 22 января 2025 в 15:48

Кирилл Никулин

Сообщений: 23
Последний визит: 3 марта 2025 в 22:10

Вы можете попробовать этот базовый подход:

div {   height: 100px;   line-height: 100px;   text-align: center;   border: 2px dashed #f69c55; }

<div>   Hello World! </div>

Однако это работает только для одной строки текста, поскольку мы устанавливаем высоту строки на ту же высоту, что и содержащий ее элемент поля.

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

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

div {   height: 100px;   line-height: 100px;   text-align: center;   border: 2px dashed #f69c55; } span {   display: inline-block;   vertical-align: middle;   line-height: normal; }

<div>   <span>Hello World!</span> </div>

CSS просто изменяет размер <div>, вертикально по центру выравнивает установив

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

Использование абсолютного позиционирования

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

div {   display: flex;   justify-content: center;   align-items: center;   height: 100px;   width: 100%;   border: 2px dashed #f69c55; }

<div><span>Hello World!</span> </div>

Редактировалось: 3 раза (Последний: 23 января 2025 в 01:44)

#3 22 января 2025 в 15:51

Петр Кирюткин

Сообщений: 18
Последний визит: 5 апреля 2025 в 22:57

Мне нужен был ряд интерактивных слонов, вертикально центрированных, но без использования таблицы, чтобы обойти некоторые странности Internet Explorer 9.

В конце концов я нашел лучший CSS (для своих нужд), и он отлично работает с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной…

div {   border: 1px dotted blue;   display: inline;   line-height: 100px;   height: 100px; }  span {   border: 1px solid red;   display: inline-block;   line-height: normal;   vertical-align: middle; }  .out {   border: 3px solid silver;   display: inline-block; }

<div class="out" onclick="alert(1)">   <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>   <div> <span>A lovely clickable option.</span> </div> </div>  <div class="out" onclick="alert(2)">   <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>   <div> <span>Something charming to click on.</span> </div> </div>

Авторизуйтесь, чтобы писать на форуме.

Заявка на услуги DST

Адрес

8 495 1985800

info@dstglobal.ru

Адрес

8 495 1985800

info@dstglobal.ru