Выравнивание слоя по центру

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя параметр align тега <DIV>.

Использование отступов

Если добавить отступ к слою слева с помощью параметра margin-left, то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением параметра margin-left (пример 1).

Пример 1. Использование параметра margin-left

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
margin-left: 30%; /* Отступ слева */
width: 40%; /* Ширина слоя */
background: #fc0; /* Цвет фона */
padding: 10px;/* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).

Пример 2. Использование отступов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
margin-left: 30%; /* Отступ слева */
margin-right: 30%; /* Отступ справа */
background: #fc0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

В данном примере показано размещение слоя шириной 40% по центру. Хотя сама ширина никак напрямую не задается, она определяется значением атрибутов margin-left и margin-right. Эти параметры устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.

Применение параметра text-align

Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Основная работа в этом случае выпадает параметру text-align. Выравнивание по центру производится с помощью атрибута center, который устанавливается для селектора BODY. Этот параметр воздействует не только на слои, но и на их содержимое, поэтому для стиля самого слоя необходимо также использовать text-align, но уже с другим параметром. Обычно используется значение left, которое задает выравнивание по левому краю и justify, определяющее выравнивание по ширине. По правому краю, как правило, текст не равняется из-за того, что читать его становится сложнее.

Ширина слоя определяется параметром width, его значение можно указывать в процентах или пикселах. Атрибуты margin-left и margin-right со значением auto используются для браузеров Opera, Netscape и Firefox, которые обязательно требует их наличия (пример 3).

Пример 3. Применение параметра text-align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
BODY {
text-align: center; /* Выравниваем содержимое веб-страницы по центру */
}

#centerLayer {
width: 400px; /* Ширина слоя в пикселах */
margin-left: auto; /* Отступ слева */
margin-right: auto; /* Отступ справа */
background: #fc0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
text-align: left; /* Выравнивание содержимого слоя по левому краю */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру двумя способами. Первый предназначен для браузера Internet Explorer и состоит в использовании параметра text-align со значением center, который добавляется к селектору BODY. Второй способ ориентирован на браузер Firefox и Opera и заключается в применении отступа слева и справа со значением auto. Такой подход гарантирует универсальность работы кода в разных браузерах.

Параметр align тега <DIV>

Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с параметром align тега <DIV>. Указывая значение center, заставляем содержимое слоя выравниваться по его центру. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого, как показано в примере 4.

Пример 4. Параметр align тега DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
width: 400px; /* Ширина слоя в пикселах */
background: #fc0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
text-align: left; /* Выравнивание по левому краю */
}
</style>
</head>
<body>

<div align="center">
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</div>

</body>
</html>

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

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

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого атрибута z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

Вначале следует указать ширину и высоту слоя с помощью параметров width и height. Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за этой особенности предлагаемый метод размещения по центру является наиболее универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через аргумент position: absolute. Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left) и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен параметр overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
position: absolute; /* Абсолютное позиционирование */
width: 400px; /* Ширина слоя в пикселах */
height: 300px; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
margin-left: -200px; /* Отступ слева */
margin-top: -150px; /* Отступ сверху */
background: #fc0; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
padding: 10px; /* Поля вокруг текста */
overflow: auto; /* Добавление полосы прокрутки */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6).

Пример 6. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
position: absolute; /* Абсолютное позиционирование */
width: 40%; /* Ширина слоя в процентах */
height: 30%; /* Высота слоя в процентах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
margin-left: -20%; /* Отступ слева */
margin-top: -15%; /* Отступ сверху */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, –20%.

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

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Выравнивание слоя по центру

Использование отступов

Применение параметра text-align

Параметр align тега <DIV>

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