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


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

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

Применение отступов для центрирования слоя по горизонтали основано на свойствах CSS margin-left и margin-right (пример 1). Также можно воспользоваться универсальным параметром margin.

Пример 1. Размещения слоя по центру через отступы
<html>
<head>
<style type="text/css">

#center {
margin-left: 30%;
margin-right: 30%;
background: #fc0;
padding: 10px;
}

</style>
</head>

<body>
<div id=center>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

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

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

Использование параметра text-align

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

Пример 2. Использование параметра text-align
<html>
<head>
<style type="text/css">

BODY {
text-align: center
}

#center {
width: 400px;
margin-left: auto;
margin-right: auto;
background: #fc0;
padding: 10px;
text-align: left;
}

</style>
</head>
<body>

<div id=center>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

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

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

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

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

Пример 3. Использование параметра align
<html>
<head>
<style type="text/css">

#center {
width: 400px;
background: #fc0;
padding: 10px;
text-align: left;
}

</style>
</head>
<body>

<div align=center>
<div id=center>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>

</body>
</html>

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

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

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

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

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины (для margin-left) и высоты слоя (для margin-top).
Чтобы высота слоя не менялась из-за его контента, добавлен параметр overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 4). Учтите, что этот параметр не работает в браузере Opera 6 и ниже.

Пример 4. Выравнивание по центру слоя с шириной, заданной в пикселах
<html>
<head>
<style>
#center {
width: 400px; /* ширина слоя */
height: 300px; /* высота слоя */
position: absolute; /* абсолютное позиционирование */
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=center>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>

</body>
</html>

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

Пример 5. Выравнивание по центру слоя с шириной, заданной в процентах
<html>
<head>
<style>
#center {
width: 40%;
height: 30%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20%;
margin-top: -15%;
background: #fc0;
border: solid 1px black;
padding: 10px;
overflow: auto;

}
</style>
</head>
<body>
<div id=center>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>

</body>
</html>

Предыдущая статья     Следующая статья     Список статей    

Следующий раздел