Приднестровская поддержка XOOPS
В Сети достаточно часто встречаются сайты, контент которых расположен в центрированном блоке с фиксированной шириной, например, как на рис. 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 броузер создаст одинаковые отступы для блока как справа, так и слева, так что он будет расположен в центре. В разделе «Создание «резинового» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом» мы познакомимся со способом расположения элементов внутри центрированного таким образом контейнера.
Отправитель | Нити |
---|
7 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 7 далее... |