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

Влад Мержевич

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя атрибут 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: -211px; /* Отступ слева, включает padding и border */
    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). При этом надо учитывать, что видимая ширина элемента складывается из значений width, padding и border.

Пример 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%.

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.