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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <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. Они устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <style type="text/css">
 #centerLayer {
 width: 400px; /* Ширина слоя в пикселах */
 margin: 0 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 пикселов и выравнивается по центру с помощью значения 0 auto свойства margin. Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.

Атрибут align тега <div>

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

Пример 4. Атрибут align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание</title>
 <style type="text/css">
 #centerLayer {
 position: absolute; /* Абсолютное позиционирование */
 width: 40%; /* Ширина слоя в процентах */
 height: 30%; /* Высота слоя в процентах */
 left: 50%; /* Положение слоя от левого края */
 top: 50%; /* Положение слоя от верхнего края */
 margin-left: -20%; /* Отступ слева */
 margin-top: -15%; /* Отступ сверху */
 background: #fc0; /* Цвет фона */
 }
 </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%.

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

Категория: Css | Добавил: ChronoW (25.04.2013)

Просмотров: 1427 | Теги: div по центру, Верстка с помощью слоев, центрирование блока, выравнивание слоя по центру | Рейтинг: 0.0/0

Всего комментариев: 0

web-development.ucoz.ru

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

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

Атрибут align тега <div>

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