Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

HTML и CSS выравнивание элементов по центру экрана

Выравнивание блока по центру экрана средствами HTML и CSS — задача, которая обязательно когда-нибудь встает перед всеми HTML-верстальщиками. Сегодня мы обсудим способы выравнивания различных элементов как по горизонтали, так и по вертикали.

HTML и CSS выравнивание элементов по центру экрана
Содержание статьи

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

Горизонтальное выравнивание встроенных элементов

В принципе, со встроенными элементами, которые имеют CSS свойство display: inline; или display: inline-block; проблем с горизонтальным выравниванием быть не должно и это решается стандартным свойством text-align.

Выравнивание встроенного элемента по горизонтали:

text-align: center;

Таким способом можно выровнять текст, изображение, таблицы и другие элементы, не являющиеся блочными. Более того, можно использовать тег center, но он является устаревшим и может не пройти проверку на валидность (не проверялось, т. к. нет необходимости). Также, например, для выравнивания таблицы или блока (div) по центру можно добавить в тег table атрибут align="center".

Самый обыкновенный текст.

Как видите, выровнять встроенный элемент по горизонтали — не проблема, поэтому мы двигаемся дальше.

Горизонтальное выравнивание блока (div) и других блочных элементов

В случае с блоком предыдущий пример не будет работать. Во-первых — потому что блок по умолчанию занимает 100% ширины области, в которой он находится и как его не равняй, он будет расположен всегда в одном месте, а во-вторых — потому что блочные элементы просто не поддаются некоторым CSS свойствам, которые могут применяться только для встроенных элементов.

Если вы хотите выровнять блок по центру экрана по горизонтали, то необходимо, чтобы ширина вашего блока была меньше ширины самого экрана или элемента, внутри которого он находится. Поэтому ширину блока нужно будет указать либо очевидно, либо в процентах от ширины родительского элемента. Проделав эти операции, вы не увидите никаких изменений на экране если у блока нет рамки и его фон не отличается от родительского, поэтому для наглядности можно временно закрасить его каким-нибудь ярким цветом и наблюдать за результатами при внесении изменений в CSS.

Теперь же осталось просто воспользоваться свойством автоматического отступа:

margin: 0 auto;

После присвоения блоку этого свойства, он переместится в центр экрана. Фактически margin: 0 auto — это сокращенная запись следующего варианта, который, как видите намного более громоздкий и не имеет права на существование, т. к. является дурным тоном и увеличивает размер файла в 4-6 раз:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

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

Вертикальное выравнивание встроенных элементов

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

display: block;

Либо только наполовину:

display: inline-block;

Вертикальное выравнивание блочных элементов

Самой распространенной проблемой начинающих верстальщиков является вертикальное выравнивание блока. Особенно проблема актуальна для блочных элементов, высота которых заранее определена. В случае, когда высота блока и высота его родителя известны заранее, проблема решается очень просто — отнимаем от высоты родительского блока высоту блока, который хотим выровнять вертикально, потом делим результат пополам (с округлением) и присваиваем отступ сверху для целевого элемента, равный полученному значению.

Например, если высота экрана или родительского элемента равна 1000 пикселей, а высота блока, который мы хотим выровнять по вертикали — 500 пикселей, то произведя необходимые вычисления, мы получим следующее:

/* (1000 - 500) / 2 = 250 */
margin: 250px auto;

Более простой, но не кроссбраузерный на 100% пример:

margin: auto;

Данный пример работает кроссбраузерно только если все величины заранее известны, но к сожалению, в большинстве случаев это не так и приходится применять более изощренные способы. Например, если вам необходимо выровнять одну строку текста по вертикали, то можно задать высоту строки, равную высоте родительского элемента при помощи line-height. Также можно воспользоваться свойством vertical-align: middle;, которое будет работать только для элементов со свойством display: inline; или display: inline-block;.

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

Отступ padding или margin

Преднамеренно увеличиваем размер родительского элемента, как бы расширяя его при помощи padding или margin:

margin: 300px 0;
/* или */
padding: 300px 0;

Одна строка текста и line-height

В этом примере необходимо знать высоту родительского элемента и быть уверенным в том, что текст достаточно короткий и не будет переноситься (обычно используется для вертикальных меню в сайдбаре):

/* Например, высота родительского элемента равна 300 пикселей */
line-height: 300px;

Вертикальное выравнивание иконок или смайлов в тексте

Часто оказывается так, что высота смайла или иконки, вставленной в текст не равна высоте одной строки текста, поэтому нужно либо установить line-height, равный высоте иконки или же использовать свойство vertical-align для изображений.

vertical-align: middle;

Таблица или display: table-cell

Таблица отлично подходит для вертикального выравнивания текста и более того имеет это свойство для ячеек по умолчанию (аналоговый атрибут — valign="middle"), однако если нужно использовать блоки, то можно присвоить им свойство display: table; и display: table-cell; (что является издевательством и полным идиотизмом), тогда обычный vertical-align заработает.

Самый обыкновенный текст.
.table {
	display: table;
}
.td {
	display: table-cell;
}

Абсолютное позиционирование position: absolute

Иногда, когда условия позволяют это сделать, можно просто позиционировать элемент абсолютно, а не относительно, тогда CSS будет выглядеть так:

position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;

Помимо приведенных примеров существует масса других способов и возможностей выровнять блочные и встроенные элементы по вертикали, однако приводить мы их не стали в силу того, что они слишком громоздкие или не являются кроссбраузерными, а также требуют простановки вендорных префиксов, что не очень хорошо. Нужно просто подождать пару лет, когда все браузеры подтянутся и необходимость в префиксах пропадет, тогда мы и будем использовать новые экспериментальные свойства. А мы же просто считаем, что приведенных кроссбраузерных примеров, которые проверены временем, более чем достаточно и незачем изобретать велосипед заново.


Предыдущая статья:
Резервная копия сайта (бэкап)

Читайте также:
Вендорные CSS префиксы


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»