Как правильно сделать в 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;

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: