Выравнивание элементов html. CSS вертикальное выравнивание для всех

У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.

Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.

Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.

Vertical-Align

Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .

Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .

Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.

• Текст центрируется относительно line-height (межстрочный интервал).
• Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.

К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .

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

Межстрочный интервал или Line-height

Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.

По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.

В данном случае высоту родительского элемента указывать необязательно.

Здесь текст
CSS:
.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
Преимущества:

• Изменяемая высота
• Верстка не едет при большом количестве текста в блоке
• Кроссбраузерность

Недостатки:

• Сложная структура

Flexbox Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox .

Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
Преимущества:

• Контаент может быть любой высоты или ширины
• Может использоваться в более сложных случаях

Недостатки:

• Нет поддержки IE 8-9
• Требуется контейнер или стили в body
• Требует множество разнообразных префиксов для корректной работы в современных браузерах
• Возможные проблемы производительности

Итог Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться