Как средствами CSS выровнить сайт по центру

выровнить сайтРасположение сайта по центру служит основой большинства макетов. Технически центрировать сайт можно разными способами.  В этом уроке мы рассмотрим как это достигается средствами CSS.

Применяя CSS, можно быть уверенным, что схема центрирования будет работать во всех значимых браузерах.

Первым делом сбрасываем все, что браузеры навязывают нам как бы по умолчанию. У разных браузеров размера начальных отступов различны, и отказавшись от них мы работаем с ними на одних условиях — на наших.

Сегодня мы применим самый простой способ обнуления, наш простенький пример нам это разрешает.

*{ margin:0;
padding:0;
}

В настоящем пользователи используют мониторы с разрешением 1024×768 и более. Поэтому,для наглядности, размер нашего блока будет 900 пикселей. Присвоим  блоку идентификатор «conteiner».

Теперь посмотрите на скриншот того, что мы должны получить:

центрируем сайт

Начнем писать стилевые значения для нашего блока «conteiner».  Чтобы лучше видеть определим тегу Body, что будет фоновым цветом, и нашему блоку разные цвета.
Кстати, на этом ресурсе приличные фоны для сайта, рекомендую.

body { background:#FC5;
}
#conteiner {
background-color:#0C6;
}

Теперь главное — выравнивание по центру. Это достигается всего двумя значениями свойства margin, примененных к нашему блоку:

#conteiner {
margin:0 auto;
}

Все выровнено, но чтобы получилось как на скрине сверху нашему блоку надо задать размеры, все также с помощью CSS:

#conteiner {
width:900px;
height: 600px;
}

Ну, вот собственно и все. Раньше делали специальные хаки для Internet Explorer, но сегодня этот браузер все делает нормально. Окончательный html-код и стили CSS получились такими:

<html>
<head>
<title>Выравнивание по центру</title>
<style type="text/css">
*{ margin:0;
padding:0;
}
body{ background:#FC5;
}
#conteiner {
width:900px;
height: 600px;
margin:0 auto;
background-color:#0C6;
}
</style>
</head>
<body>
<div id="conteiner"></div>
</body>
</html>

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha