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

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

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

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