Приветствую вас на моем блоге. Сегодня я хотел дать вам несколько способов, как реализовать в css выравнивание текста по вертикали, ведь такого свойства в css попросту нет.
Особенности выравнивания у блочных элементов
Наверянка многие из вас знают, что по горизонтали текст позиционировать легко – нужно использовать свойство text-align. С вертикальным выравниванием все сложнее, но давайте глянем, как его можно сделать.
Не определять высоту блока
Простейший и действенный способ – не задавать элементу height, то есть явную высоту. Например, нам нужно в каком-то абзаце выровнять текст по вертикали по центру. Как это правильно сделать? Сделайте ему одинаковые отступы сверху и снизу и это произойдет автоматически. Попробуйте.
P{
Background: brown;
Padding: 20px 0;
}
Я сделал фон коричневым просто для того, чтобы было видно весь блок. Вообще я вам рекомендую использовать этот способ, потому что он очень простой и подходит для выравнивания в важных абзацах и цитатах.
Хитрость с line-height
Я все-таки расскажу и о других способах, хотя в большинстве случаев вам хватит первого. В этом методе можно и нужно задавать элементу определенную высоту, после чего высоту строки нужно указать такую же. Пример:
P{
Height: 50px;
Line-height: 50px;
}
Все, поскольку высота элемента и строки совпадает, то текст будет ровно по центру. Единственный минус этого способа – так можно выровнять только одну строчку текста, не больше.
Преобразование блока в ячейку таблицы
В этом способе вы должны нужный блок с текстом превратить сначала в ячейку таблицы. Делается это так:
Display: table-cell;
Далее этому же блоку нужно добавить свойство:
Vertical-align: middle;
Дело в том, что для ячеек работает вертикальное выравнивание, поэтому текст в них можно легко позиционировать как по горизонтали, так и по вертикали.
В общем-то, это далеко не все способы, но самые нормальные, на мой взгляд. Остальные требуют использования абсолютного позиционирования, псевдоэлемента и т.д., то есть сильно усложняют процесс выравнивания. А зачем его усложнять? Задача простая, поэтому используйте для нее такие же методы.