Выравнивание слоя по центру
Читать также: Слои в CSS. Свойство z-index Читать также: Верстка с помощью слоев. Блочная верстка Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если
лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту
такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять
свои размеры в зависимости от настроек операционной системы, типа монитора, установленного
разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную
особенность и располагать элемент у края окна или по его центру.
Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении
имеется несколько способов — с помощью отступов, через позиционирование,
а также используя атрибут 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%.
Указанная особенность позволяет применять любые единицы измерения, а не ограничиваться
только одной формой записи, что делает код подходящим практически для всех
случаев.
|