www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Выравнивание слоя по центру

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

контентовая версия  

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

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

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

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

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

Валидный HTML
Валидный CSS

<!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=windows-1251">
<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. Использование отступов

Валидный HTML
Валидный CSS

<!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=windows-1251">
<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

Валидный HTML
Валидный CSS

<!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=windows-1251">
<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 тега DIV

Валидный HTML
Валидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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, размещаться по центру будет и контент внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство web-страницы.

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

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

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

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

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

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

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

Валидный HTML
Валидный CSS

<!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=windows-1251">
<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. Ширина слоя в процентах

Валидный HTML
Валидный CSS

<!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=windows-1251">
<title>Выравнивание</title>
<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%.

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

Статья опубликована: 20.03.2009 Последнее обновление: 01.05.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

height
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.

left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

margin-left
Устанавливает величину отступа от левого края элемента.

margin-right
Задает величину отступа от правого края элемента.

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

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на web-странице.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

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

z-index
Управляет размещением элементов по z-оси, что позволяет накладывать элементы друг на друга.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект