0

У меня есть вопрос по CSS: как можно центрировать сайт в середину экрана, так чтобы блоки были на одном расстоянии друг от друга на разных разрешениях экрана, т.к. у меня экран очень широкий, я пишу код как бы для одного разрешения экрана, а для других экранов идёт всё косо... Прошу написать подробное описание CSS кода с <div>.

3 ответа 3

5

Весь контент оборачиваете в див:

<div id="center-content">
    <div>шапка</div>
    <div>меню/контент</div>
    <div>футер</div>
</div>

И потом в css:

#center-content{
    margin: 0 auto;
    width: 1000px;/* например, укажете нужную ширину */
}
8
  • Вроде бы всё так, но если нужно добавить блоки меню, а в дивной системе див отталкивается от дива (грубо говоря), как мне централизовать всю страницу? Я знаю, что есть команды для независимости тега. Но... могли бы вы подробно написать код с шапкой блоком меню и футером, буду очень благодарен!
    – maksik
    26 авг 2011 в 12:43
  • Не понимаю проблемы. Оборачиваете всю страницу в эту обертку и все, ну или только необходимую ее часть. Или вы дивы не можете расположить горизонтально?
    – metazet
    26 авг 2011 в 12:50
  • Мне нужно написать код для статичного сайта, шапка меню, под ним блок с меню (левый) и футер, но так чтобы этот сайт имел общую ширину, например, 1000 пикселей, но на всех экранах выглядел как обычный сайт, а не блок меню дальше, чем нужно и т.д. Можете дать мне примерный код.
    – maksik
    26 авг 2011 в 13:25
  • Вы наверное издеваетесь? Может я заработался, но я ВООБЩЕ не понимаю, в чем сложность? Оборачиваете весь свой сайт в обертку, предложенную мной, и всё будет по центру! Учим основы css!
    – metazet
    26 авг 2011 в 13:34
  • Спасибо проехали ...
    – maksik
    26 авг 2011 в 13:36
2
<div style="margin-left:auto; margin-right:auto;">
Контент
</div>

C такими параметрами див всегда будет находиться по центру родителя.

1
<div style="margin:0 auto;width:1000px;">

<div id="header" style="height:150px;">

<div id="left_col" style="float:left;width:200px;"></div>
<div id="content" style="float:left;width:auto;"></div>

<div id="footer" style="clear:both; height:150px;"></div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.