Центрирование div в Google Chrome - PullRequest
Новая
       2

Центрирование div в Google Chrome

0 голосов
/ 18 мая 2011

У меня есть следующий CSS: 

html, body {
        background-color:black;
        font-family:"arial bold";
        overflow:auto;
        text-align: center; 
    }
div#content {
        width:792px;
        height:100%;
        padding:0px;
    }

div#header  {
        height:216px;
        width:100%;
    }

У меня есть HTML-код: 

<html>
    <head>
        <title>
            Think in a NEW BOX.
        </title>

        <link rel="stylesheet" type="text/css" href="styles/default.css" />
    </head>
    <body onload="">
        <div id="content">
            <div id="header">
                <img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
            </div>
        </div>
    </body>
</html>

Теперь это прекрасно работает в IE.Центр DIV прекрасно (заголовок).Однако в Google Chrome div выравнивается по левому краю.Я что-то упустил?

Ответы [ 5 ]

2 голосов
/ 18 мая 2011

Еще лучшее решение - центрировать блок следующим образом: 

#content 
{
  margin:0px auto;
}

Этот метод используется ... ну, почти всеми (включая SO).

2 голосов
/ 18 мая 2011

Используйте 

#content {
    margin-left: auto;
    margin-right: auto;
    width: 100px; /* Your width */
}

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

2 голосов
/ 18 мая 2011

У меня тоже была эта «проблема» сегодня.Решил это с помощью display: inline-block;.Работающие браузеры не изменятся, и, если они уже работают, это не перепутает старый IE.

2 голосов
/ 18 мая 2011

Вам не хватает:

  1. Тип документа (поэтому IE эмулирует ошибки в IE 4/5 дней, чтобы справиться с ужасными, древними веб-страницами)
  2. То, что элемент divэлемент блока, поэтому text-align не влияет на него
  3. auto левое и правое поля на div.

См. Центрирование с использованием CSS для более длительногообъяснение с диаграммами

1 голос
/ 18 мая 2011

Убедитесь, что у вас фиксированная ширина и используйте margin: 0 auto;.

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

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

...