Оглавление

Центрирование блока на странице

В Сети достаточно часто встречаются сайты, контент которых расположен в центрированном блоке с фиксированной шириной, например, как на рис. 9.20. Как достичь такого эффекта средствами CSS?

 

Центрирование блока с фиксированной шириной

Рис. 9.20. Центрирование блока с фиксированной шириной с помощью CSS (DEMO)

 

Решение
Для центрирования блока с фиксированной шириной можно задать для него внешний отступ по бокам с помощью CSS-свойства margin со значением auto:


center.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Центрирование блока</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="center.css" />
  </head>
  <body>
    <div id="content">
      <p>Этот блок шириной в 480 пикселов и размещен в центре страницы.</p>
	<p>Для центрирования блока  ... </p>  
	<p>Таким образом можно с легкостью центрировать блоки ...  </p>
    </div>
  </body>
</html>

 

 

center.css

body {
  background-color: #CCD3D9;
  color: #000000;
}
#content {
  width: 480px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #A6B2BC;
  background-color: #FFFFFF;
  color: #000000;
  padding: 0 20px 0 20px;
}

 
Обсуждение
Таким образом можно с легкостью центрировать блоки; использование такого подхода оптимально для расположения области с контентом в центре страницы.
При задании свойству margin значения auto броузер создаст одинаковые отступы для блока как справа, так и слева, так что он будет расположен в центре. В разделе «Создание «резинового» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом» мы познакомимся со способом расположения элементов внутри центрированного таким образом контейнера.

 

Примечание
Internet Explorer 5.x. Раньше при использовании такого приема нужно было указать несколько дополнительных CSS-правил, чтобы избежать возникновения ошибок в Internet Explorer 5.x, поскольку в этих версиях броузера не получалось центрировать контент с помощью внешних отступов. Чтобы перехитрить броузер, нужно было задать свойство text-align: center для элемента body и text-align: left для блока div, содержащего контент. Если вам необходимо обеспечить нормальное отображение сайта с такой структурой в этом бедном старом броузере, воспользуйтесь таким приемом.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити