margin: 0 auto не работает только в IE - PullRequest
4 голосов
/ 11 февраля 2012

Я пытаюсь центрировать div #logo_alt, содержащий изображение, используя margin: 40px auto 0px auto;.

Проблема: : в Chrome это выглядит идеально, но в IEсодержащий div выравнивается слева от его родительского контейнера #header_organizer.Я просто не могу понять, почему это происходит, и как это можно исправить в IE!Любая помощь с благодарностью:)

HTML

<div id="header_organizer">
    <div id="user_bar">...</div>
    <div id="user_bar_menu">...</div>
    <div id="logo_alt">                <!-- <<<<< We are centering this div! -->
       <img src="logo.png" \>
    </div>
</div>

CSS

#header_organizer {
    width: 100%;
    height: 180px;
    background: black url(../images/template/header.png);
    float: left;
    position: relative;
    z-index: 1000;
}

#logo_alt {
    width: 256px;
    height: 55px;
    margin: 40px auto 0px auto;
}


#user_bar {
    height: 30px;
    color: #CCC;
    font-size: 13px;
    margin-right: 10px;
    padding: 0px 5px;
    float: right;
    cursor: pointer;
    position: relative;
    z-index: 3000;
}

#user_bar_menu {
    width: 200px;
    height: 165px;
    background: white;
    border: 1px solid #BEBEBE;
    float: right;
    position: absolute;
    top: 30px;
    right: 10px;
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    display: none;
    z-index: 1000;
    border-image: initial;
}

Ответы [ 2 ]

10 голосов
/ 11 февраля 2012

HTML-файл начинается с <html xmlns="http://www.w3.org/1999/xhtml">.

Что ж, ваша проблема.Вам нужно дать вашему документу декларацию типа документа XHTML, так как ваш корневой элемент в любом случае имеет этот атрибут xmlns.Тогда IE будет работать в стандартном режиме и правильно отобразит ваш стиль margin: 0 auto.

1 голос
/ 11 февраля 2012

Во-первых, добавьте doctype, чтобы IE не проскальзывал в причуды подробнее.

Затем попробуйте это ...

body {
    width: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...