Выравнивание слоя по центру
Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять свои размеры в зависимости от настроек операционной системы, типа монитора, установленного разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную особенность и располагать элемент у края окна или по его центру.
Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя параметр 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=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. Использование отступов
<!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
<!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
<!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=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, размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство веб-страницы.
Абсолютное позиционирование слоя
При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого атрибута 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=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. Ширина слоя в процентах
<!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.2006 | Последнее обновление: 01.05.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Андрей
09.05.2006
<div style="position: absolute; width: X; left: 50%; margin-left: -(X/2);">
где X - ширина дива. Без указания position не определяется left.
Андрей
09.05.2006
FireCat
27.05.2006
Разве? А разве координаты вычисляются не от левого верхнего угла РОДИТЕЛЬСКОГО спозиционированного элемента?
Пример:
<div style="position: absolute; top: 50px;">
<div style="position: absolute; top: 50px;>
</div></div>
Вложенный div уйдет на 100px от верха экрана (точнее - от элемента html, но это частности
)Влад Мержевич
29.05.2006
shalFey
19.08.2006
А если использовать пиксели, то отображается четко по центру в Опере 8.54 и IExplorer 7, а Опере 9 и в Firefox 1.5 - чуть вправо-вниз.
И еще такой вопрос если можно: для тега DIV Вы используете параметры, то id, то class. DIV себя с ними по-разному ведет, с чем это связано и в каких случаях применяется один и другой? Спасибо.
Влад Мержевич
21.08.2006
Вариант решения данной проблемы следующий - отказаться от добавления padding. Чтобы все-таки установить поля, необходимо включить еще один внутренний слой и для него уже применять поля.
Blooder
23.08.2006
Параметр class следует использовать для задания стиля для нескольких похожих элементов, а id для элементов, встречающихся на странице лишь один раз.
vlad
09.09.2006
Oz
11.09.2006
#mcontainer {
width: 1001px;
margin-top: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
}
В опере и firefox работает, а в IE нет.
Влад Мержевич
11.09.2006
Александр Бублиенко
10.10.2006
Се согласен с Blooder. Привожу тако пример.
Используем класс:
td.cell { padding:5px; }
тогда, хтмл код выглядит так:
<table>
<tr>
<td class="cell">123</td>
...
<td class="cell">123</td>
</tr>
</table>
т.е. ко всем ячейкам дописываеться class="cell".
Идентификаторы:
table#tbl td { padding:5px; }
<table id="tbl">
<tr>
<td>123</td>
...
<td>123</td>
</tr>
</table>
уже не нада дописывать к каждой ячейке класс.
т.е. уменьшаеться размер кода.
Думаю, так же ведут себя и DIVы.
Владимир
15.10.2006
получился такой код
<body>
<center>
<div id="header">test</div>
</center>
</body>
И вроде все браузеры словили.
ненадо ставить
margin-left: auto; /* Отступ слева */
margin-right: auto; /* Отступ справа */
кто что скажет?
Влад Мержевич
16.10.2006
В твоем случае <div id="header">test</div>, ширина слоя - auto и центрировать можно только содержимое, а никак не сам слой.
Юр_й
18.10.2006
Петр
08.12.2006
Валерий
09.01.2007
mpoSimba
04.02.2007
P.S. Серж, вы можете "положить" ваш `div` в другой (родительский) с аттрибутом align="center", так как у вас фисксирована ширина. Центрировать `div` по-вертикали прид?тся полями (если вы об этом).
Юра
03.04.2007
Инокс
05.04.2007
Инокс
05.04.2007
Влад Мержевич
05.04.2007
В идеале так.
margin-bottom: 10px;
}
Инокс
05.04.2007
Влад Мержевич
05.04.2007
Инокс
05.04.2007
dr. Zverev
06.04.2007
Читатель (Мас)
10.04.2007
Итак, вопрос актуальный! Я для себя решил его просто:
<style>
.SomeDiv {
position:relative;
width:100px;
height:20px;
}
.SomeDiv div {
position:relative;
padding:5px;
font-size:10px;
height:10px;
}
</style>
<div class="SomeDiv"><div>
Some centered text.
</div></div>
Должно сработать(не проверял этот пример). Возникнут вопросы:
- А почему ты в див влаживаеш див?
- Просто данная конструкуия корректно работает в IE, Opera, Mozilla.
- Как расчитывать расстояние чтобы не расширять DIV?
- Родительский слой кпримеру 20px, вложенный слой -- 10px.
padding: [ (20-10)/2 ]px;
Mediator XP
22.04.2007
> бьюсь над таким простым вопросом - как отцентровать содержимое слоя по вертикали
> [...]
> Должно сработать(не проверял этот пример).
чувак, ты - гений! работает! я проверил!
Mediator <mediator@mail.ru>
Задрот
07.05.2007
id упоминается в теле страницы только раз и применяется только к одному тегу <table> и вполне логично что определение стиля данного айди распространяется на дочерние элементы тега <table>. А вот второй раз к другому тегу пусть даже <table> вы применить его не сможете.
Кроме того в примере с классами вы допустили оплошность. Зачем прописывать класс применительно к тегу <td>? Пропишите его также для <table> и прописывать класс каждому тегу ячейки не прийдется. Эффект будет таким же как и во втором случае с тем отличием, что идентификатор вы сможете употребить только к одной таблице на странице а класс к нескольким.
klierik
09.05.2007
в нете нашел такой вариант. может кому-то понадобиться
css:
.center {
width: 695px; /*ваша ширина*/
border: 0px solid green;
margin:0 auto;
}
html:
...
<body>
<div class="center">
something
</div>
данное выравнивание сработало во всех броузерах корректно
to klerik
13.06.2007
Влад Мержевич
19.06.2007
Ser_Vant
23.07.2007
Один только вопрос.
Есть таблица, фоном у которой изображение.Изображение 1600 на 1200. много? так надо.
и нужно, чтобы при любом разрешении экрана вс? это оставлось по центру.
попробовал так, таблицу растянул на весь экран (как фон используется другой рисунок), и выровнял изображение в центр. пока вс? нормально. Затем привязал к центру описанным выше способом ("абсолютное позиционирование")... вс? хорошо, но при уменьшении окна вс? съезжает влево. почему? уже вс? что знал применил...
robinovich
23.08.2007
не могу сделать, firefox показывает, а интернет эксплорер - нет
Влад Мержевич
24.08.2007
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
robinovich
26.08.2007
помогите кто нить советом, может можно это дело на яве написать, как на сайте http://www.gazfond.ru
maza
19.09.2007
пример:
left: 50%;
margin-left: -25%;
Влад Мержевич
20.09.2007
МАКС
20.09.2007
<div id="header">
<img src="img/main4.jpg" width="996" height="186" border="0" alt="">
<div id="layer2">
<img src="img/main4_in.jpg" width="445" height="26" border="0" alt="">
</div>
</div>
--~--
CSS файл:
#header {
z-index: 1;
}
#layer2 {
position: absolute;
z-index: 3;
width: 445px;
height: 26px;
left: 383 px;
top: 136px;
}
--~--
Вроде все пишу правильно (все размеры верны), но вторая картинка, то есть layer2 отсчитывает не от родительского <div id="header">, а от края страницы. Что я делаю не так?
Влад Мержевич
21.09.2007
Леонид
16.10.2007
Оба имееют фиксированную ширину и отцентрированы по центру экрана.
В коде (XHTML Strict) сначала располагается блок с контентом, а потом абсолютно позиционированный блок-шапка. Благодаря тому, что блок контента имеет отступ сверху, равный высоте шапки и абсолютно позиционированному наверх слою с шапкой, получается что шапка сверху.
При этом возникла проблема (В ИЕ 7)
Т.к. абсолютно позиционированный слой отцентрировать нет возможности, то сначала создаем такой слой, а потом вставляем в него шапку.
Вот прмерно так:
<div class = "content">
<h1>Заголовок</h1>
<p>Контент</p>
</div>
<div class = "abs_pos">
<div class = "head">Logo, banners</div>
</div>
И CSS:
.content {
margin-top: 200px;
width:900px;
margin:0 auto;
}
.abs_pos {
positon:absolute;
width:100%;
height:200px;
top:0;
left:0;
}
.head {
width:900px;
height:200px;
margin:0 auto;
}
В общем контент центрируем относительно экрана, а шапку, относительно абсолютно позиционированного блока, ширина которого тоже 100% ширины экрана.
Во всех браузерах это работает, но в ИЕ7 возникает неприятный глюк. Если начать увеличивать (масштабировать) изображение (CTRL + Колесо мыши, или меню Масштаб 150%), то блоки начинают съезжать друг относительно друга.
Контент остается центрированным относительно экрана, а шапка остается центрированныой относительно своего блока, который уже в полтора раза больше ширины экрана. В Опере все нормально увеличивается.
Вот пример http://smeb.ru/new/first.html
shopox
06.02.2008
.content, .head {width:900px; margin:0 auto;}
.head {height:200px;}
<div class="content">
<h1>Заголовок</h1>
<p>Контент</p>
</div>
<div class="head">Logo, banners</div>
?
Андрей
07.02.2008
Serj
15.02.2008
Мне нужно в слое 100% ширины разместить ссылки равномерно от начала до конца
Однако, такой код
<div style="text-align: justify">
<a href=''>1</a>
<a href=''>2</a>
<a href=''>3</a></div>
выравнивает их по левому краю во всех браузерах
HTML 4.01 строгий
mig
24.03.2008
мож кому навеит мыслишек
<table height=100% width=100%><tr><td>
<div align="center">
<table height="741" width="708" border="0" cellpadding="0" cellspacing="0">
...
</table>
</div>
</td></tr></table>
Петр
13.04.2008
<script>
var userHeight;
if(document.height)
userHeight = document.height;
else
userHeight = document.body.scrollHeight;
var userWidth;
if(document.width)
userWidth = document.width;
else
userWidth = document.body.scrollWidth;
document.write("<style>")
document.write("#legend { position: absolute ; top: " + (userHeight-490)/2 + " ; left: " + (userWidth-750)/2 + " ; height: 490px ; width: 750px }")
document.write("</style>")
</script>
Иван
17.04.2008
Зайдет директор-заказчик, у которого на компе ценная инфа и в целях безопасности все куки и яваскрипты отключены, посмотрит на ваш дизайн, и скажет что фигня.
Иван
17.04.2008
<style type="text/css">
.align_center
{
position: relative;
width: 100%;
}
.align_center:after
{
content: '';
display: block;
clear: both;
}
.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}
.align_center_to_right
{
position: relative;
z-index: 1;
right: -50%;
}
</style>
<div class="align_center" style="border: 1px dashed red; color: red;">
Выравниваем относительно этого блока.
<div class="align_center_to_left">
<div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
Ширина блока зависит от размера надписи.
</div>
</div>
</div>
(взят с сайта лебедева)