Блог

Главная - Вопросы по программированию - Центрирование div в Google Chrome

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

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

У меня есть следующий 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 выровнен по левому краю. Я что-то упускаю?

Ответ №1:

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

Комментарии:

1. Хотя это испортит не старый IE.

Ответ №2:

Вы упускаете:

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

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

Ответ №3:

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

 #content 
{
  margin:0px auto;
}

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

Ответ №4:

Используйте

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

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

Ответ №5:

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