HTML и CSS 0

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

Приветствую вас на моем блоге. Сегодня я хотел дать вам несколько способов, как реализовать в css выравнивание текста по вертикали, ведь такого свойства в css попросту нет.

Особенности выравнивания у блочных элементов

Наверянка многие из вас знают, что по горизонтали текст позиционировать легко – нужно использовать свойство text-align. С вертикальным выравниванием все сложнее, но давайте глянем, как его можно сделать.

Не определять высоту блока

Простейший и действенный способ – не задавать элементу height, то есть явную высоту. Например, нам нужно в каком-то абзаце выровнять текст по вертикали по центру. Как это правильно сделать? Сделайте ему одинаковые отступы сверху и снизу и это произойдет автоматически. Попробуйте.

P{
Background: brown;
Padding: 20px 0;
}

вертикально выравнивание в css
Я сделал фон коричневым просто для того, чтобы было видно весь блок. Вообще я вам рекомендую использовать этот способ, потому что он очень простой и подходит для выравнивания в важных абзацах и цитатах.

Хитрость с line-height

Я все-таки расскажу и о других способах, хотя в большинстве случаев вам хватит первого. В этом методе можно и нужно задавать элементу определенную высоту, после чего высоту строки нужно указать такую же. Пример:

P{
Height: 50px;
Line-height: 50px;
}

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

Преобразование блока в ячейку таблицы

В этом способе вы должны нужный блок с текстом превратить сначала в ячейку таблицы. Делается это так:

Display: table-cell;

Далее этому же блоку нужно добавить свойство:

Vertical-align: middle;

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

В общем-то, это далеко не все способы, но самые нормальные, на мой взгляд. Остальные требуют использования абсолютного позиционирования, псевдоэлемента и т.д., то есть сильно усложняют процесс выравнивания. А зачем его усложнять? Задача простая, поэтому используйте для нее такие же методы.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5