Центрирование всей страницы с помощью CSS - PullRequest
Новая
       21

Центрирование всей страницы с помощью CSS

0 голосов
/ 31 декабря 2008

Я пытаюсь центрировать всю свою страницу, используя только CSS, и это оказывается сложнее, чем я ожидал. В настоящее время мой код работает в IE, но не в Firefox, который вносит изменения. Страницу можно увидеть здесь . Ниже приведена часть кода: 

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}

Структура моего HTML: 

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

Кажется, что в Firefox все, что следует за div, создается вне него. Эта проблема решается, если я добавляю 'float: left' в div для переноса, но тогда, очевидно, все перемещается влево, а не в центр.

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

5 голосов
/ 31 декабря 2008

Измените разметку на 

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

РЕДАКТИРОВАТЬ: Глядя на ссылку, вы уже сделали это. Вы можете добавить либо переполнение: авто; #wrap или добавить очищающий div в конце непосредственно перед закрывающим тегом в div wrap.

Кроме того, на вашей странице примера в теге div отсутствует закрывающий тег.

0 голосов
/ 31 декабря 2008

Если вы знаете ширину вашей страницы - и она исправлена, вы можете использовать следующую методологию.

  • Содержит содержимое вашей страницы с помощью div (который будет выполнять функцию оболочки)
  • Дайте этому div 'wrapper' ширину ' W '
  • Поместите div обертки, используя 'left: 50%;'

сейчас, используя тот факт, что возможно иметь отрицательную маржу ...

  • Потяните назад положение div обертки, используя 'margin-left: - ( W / 2 );'
0 голосов
/ 31 декабря 2008

Используйте этот CSS: 

body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

Тогда, давайте рассмотрим это утверждение из вашего вопроса:

все, что следует за div, будет создано вне него

Так оно и работает. Не кладите ничего за пределы своей обертки. Думайте об этом как о суррогатном теле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...