Выравнивание элемента по горизонтали. Расположение div по центру и другие тонкости позиционирования
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
CSS - Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков
выровнять div
по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе
.
Простое центрирование DIV-элемента на странице
Этот метод будет отлично работать во всех браузерах.
CSS
Center-div
{
margin: 0 auto;
width: 100px;
}
Пример
Значение auto
в свойстве margin
устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента
обязательно должно быть установлено значение width
.
Центрируем DIV внутри DIV-элемента старым способом
Этот метод div
выравнивания по центру будет работать во всех браузерах.
Внешний div
может быть помещен как угодно, но у внутреннего блока div
обязательно должна быть указана ширина (width
).
Центрируем DIV внутри DIV-элемента с помощью inline-block
В этом методе центрирования div
внутри div
необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8
.
Свойство text-align
работает только в inline-элементах
. Значение inline-block
позволяет отобразить внутренний div
в качестве inline-элемента
, а также в качестве блока (inline-block
). Свойство text-align
во внешнем div-элементе
позволит нам центрировать внутренний div
.
Центрируем DIV внутри DIV-элемента горизонтально и вертикально
Здесь для центрирования div
по центру страницы используется margin: auto
. Пример будет работать во всех современных браузерах.
У внутреннего div-элемента
должна быть указана ширина (width
) и высота (height
). Метод не сработает, если у внешнего div-элемента
будет фиксированная высота.
Центрируем DIV по нижней границе страницы
Здесь для расположения div
по центру по вертикали используется margin: auto
и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
У внутреннего div
должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom
внешнего div
. Вы также можете центрировать div
по верхней границе страницы, заменив свойство bottom на свойство top
.
Центрируем DIV на странице вертикально и горизонтально
Здесь, чтобы выровнять div
по центру, снова используется margin: auto
и абсолютное позиционирование внешнего div
. Метод будет работать во всех современных браузерах.
У div-элемента
должна быть установлена ширина (width
) и высота (height
).
Делаем адаптивное центрирование DIV-элемента на странице
Здесь для выравнивания div по центру средствами CSS
мы делаем ширину div-элемента
адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.
CSS
Center-div
{
margin: 0 auto;
max-width: 700px;
}
Пример
У центрированного div-элемента
должно быть установлено свойство max-width
.
Центрируем DIV внутри элемента с помощью свойств внутреннего блока
Внутренний div-элемент
здесь адаптивен. Этот метод расположения div
внутри div
по центру будет работать во всех браузерах.
Здесь у нас несколько элементов с примененным свойством inline-block
, расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS
; то есть, если размер экрана меньше 600 пикселей, то свойство max-width
как для левого, так и для правого div-элемента
устанавливается на 100%.
DIV-элемент, центрированный при помощи Flexbox
Здесь мы располагаем CSS div
по центру с помощью Flexbox
. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+
, IE11
, Microsoft Edge
, Firefox 38+
, Safari 9+
, Opera 30+
, iOS Safari 9+
, а также Android Browser 40+
.
Каждый верстальщик постоянно сталкивается с необходимостью выравнивания контента в блоке: по горизонтали или по вертикали. Есть несколько неплохих статей на этот счет, но все они предлагают много интересных, но мало практичных вариантов, из-за чего приходится тратить лишнее время, чтобы выделить главное. Решила подать эту информацию в той форме, которая удобна мне, чтобы больше не гуглить.
Выравнивание блоков с известными размерами
Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).
Выравнивание при помощи padding
Иногда можно не центрировать элемент, а добавить ему границы свойством "padding
".
Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.
Если для блока задано "position: absolute
", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top
","right
","bottom
","left
") внутреннего блока присвоить одинаковое значение, а также "margin: auto".
*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).
.example-wrapper2
{
position
: relative
;
height
: 250px
;
background
: url(space.jpg)
;
}
.cat-king
{
width
: 200px
;
height
: 200px
;
position
: absolute
;
top
: 0
;
left
: 0
;
bottom
: 0
;
right
: 0
;
margin
: auto
;
background
: url(king.png)
;
}
Горизонтальное выравнивание
Выравнивание посредством "text-align: center"
Для выравнивания текста в блоке есть специальное свойство "text-align
". При установленном значении "center
" каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.
Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац - ведь суть не с нем, а суть в выравнивании.
Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto
" (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.
Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.
Вертикальное выравнивание
С вертикальным выравниванием намного больше проблем - по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.
Выравнивание свойством line-height
В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height
" и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.
Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".
У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.
Выравнивание по вертикали в таблицах
Свойство "vertical-align
" также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell
".
Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.
Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.
Выравнивание дополнительным inline-элементом
И для inline-элементов можно применить "vertical-align: middle
". При этом все элементы с "display: inline
", которые находятся в одной строке, выровняются относительно общей центральной линии.
Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы:before или:after.
Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.
Пока что такой способ практически не встречался мне, но особых ограничений для него нет.
Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!
Влад Мержевич
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по
горизонтали и вертикали, расширяются возможности по управлению положением элементов
относительно друг друга. Таблицы позволяют задавать выравнивание изображений,
текста, полей формы и других элементов относительно друг друга и веб-страницы
в целом. Вообще, выравнивание в основном необходимо для установки зрительной
связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является
использование сплэш-страницы. Это первая страница, на которой, как правило,
расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение
также является и ссылкой на остальные разделы сайта. Требуется поместить этот
рисунок по центру окна браузера вне зависимости от разрешения монитора. Для
этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
Выравнивание
В данном примере выравнивание по горизонтали устанавливается с помощью параметра
align="center"
тега
,
а по вертикали содержимое ячейки можно не центрировать, поскольку это положение
задано по умолчанию.
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать
, код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует,
что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо
от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align
(горизонтальное
выравнивание) и valign
(вертикальное выравнивание)
тега
, допустимо устанавливать несколько
видов положений элементов относительно друг друга. На рис. 1 показаны способы
выравнивания элементов по горизонтали.
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
требуется установить атрибут valign
со значением
top
(пример 2).
Пример 2. Использование valign
Выравнивание
Колонка 1
Колонка 2
В данном примере характеристики ячеек управляются с помощью параметров тега
, но тоже удобнее изменять через стили.
В частности, выравнивание в ячейках указывается свойствами vertical-align
и text-align
(пример 3).
Пример 3. Применение стилей для выравнивания
Выравнивание
Колонка 1
Колонка 2
Для сокращения кода в данном примере используется группирование селекторов,
поскольку свойства vertical-align
и padding
применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо значения top
используется bottom
.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому
в случае разной высоты колонок требуется задавать выравнивание по верхнему краю.
Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении
формул, как показано на рис. 2.
В подобном случае формула располагается строго по центру окна браузера, а ее
номер — по правому краю. Для такого размещения элементов понадобится
таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в
средней ячейке выравнивание делается по центру, а в правой — по правому
краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить
позиционирование формулы по центру.
Пример 4. Выравнивание формулы
Выравнивание
(18.6)
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для
создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они
перемежаются с текстом. Один из вариантов оформления формы, которая предназначена
для ввода комментария, показан на рис. 3.
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы
формы — по левому, потребуется таблица с невидимой границей и двумя
колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые
поля (пример 5).
Пример 5. Выравнивание полей формы
Выравнивание
В данном примере, для тех ячеек, где требуется задать выравнивание по правому
краю, добавлен атрибут align="right"
.
Чтобы надпись «Комментарий» располагалась по верхней границе многострочного
текста, для соответствующей ячейки устанавливается выравнивание по верхнему
краю с помощью атрибута valign
.
Верстка и выравнивание по центру страниц сайта является делом творческим и у начинающих часто вызывает трудности.
Поэтому давайте посмотрим, как это сделать. Предположим, мы хотим сделать страницу такой структуры:
Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer).
Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main):
Шапка сайта
Содержимое
Низ сайта
На примере этой структуры рассмотрим несколько вариантов.
Верстка и центрирование резинового сайта
При верстке резинового сайта основной используемой единицей измерения является - %, ведь сайт должен растягиваться по ширине
и занимать все свободное пространство.
Следовательно, ширина блоков "header" и "footer" будет составлять 100% ширины экрана.
Ширина блока "menu" пусть будет 30%, а блок "content" должен располагаться рядом с блоком "menu", т.е. он должен иметь левое поле
(margin-left) шириной равной ширине блока "menu", т.е. 30%.
Чтобы блоки "menu" и "content" располагались рядом, сделаем
блок "menu" плавающим и прижмем его к левому краю. Также зададим цвета фона (background) для наших блоков.
Теперь запишем все это в таблицу стилей (на странице style.css)
Высоту блоков задали условно, чтобы был виден результат. Посмотрите на нашу страницу в браузере:
Если вы будете менять размеры окна браузера, то будет меняться ширина всех блоков. Это не всегда удобно, т.к. при растягивании
блока меню возникает пустое место. Поэтому чаще ширину блока "menu" делают фиксированной, давайте и мы так сделаем. Для этого
заменим в таблице стилей значения соответствующих свойств:
Теперь наша страница растягивается более естественно. При резиновой верстке страницы занимают всю ширину экрана, поэтому
выравнивание по центру страниц не требуется.
Но если хочется можно сделать так, чтобы ваша страница имела равные отступы
слева и справа экрана. Для этого надо добавить стиль блоку "main", который является контейнером для всех остальных блоков:
Теперь наша страница выглядит так:
Верстка и центрирование сайта, фиксированной ширины
В этом случае нам придется задать фиксированные размеры наших блоков:
Сейчас наша страница прижата к левому краю экрана.
В этом случае выравнивание по центру страниц сайта можно осуществить
следующим образом. Вспомним, что у нашей страницы есть тег "body", которому также можно задать ширину и какие-то отступы.
Сделаем так: зададим тегу "body" ширину в 800 пикселов (как и у блока "main") и левый отступ (padding-left) в 50%. Тогда
все содержимое блока "main" будет отображаться в правой части экрана (т.е. от середины вправо):
Чтобы наш блок "main" располагался посередине экрана, надо чтобы его середина совпадала с серединой тега "body". Т.е.
надо сместить блок "main" влево на половину своего размера.
Ширина блока "main" - 800 пикселов, значит надо задать ему свойство "margin-left:-400px". Да, это свойство может принимать
отрицательные значения, тогда левое поле уменьшается (т.е. сдвигается влево). А именно это нам и нужно.
А наша страница в браузере располагается ровно посередине:
Мы рассмотрели два варианта выравнивания по центру страниц сайта, на самом деле они не являются догмой. Вы можете поэкспериментировать
и придумать свой вариант, только проверяйте его работу в разных браузерах. К сожалению, то что хорошо отображается в FireFox или
Opera, может совершенно непонятно отображаться в IE и наоборот. И об этом надо помнить.