Горизонтальное выравнивание не работает в IE - PullRequest
Новая
       3

Горизонтальное выравнивание не работает в IE

0 голосов
/ 23 февраля 2012

Я пытаюсь выровнять div по горизонтали, но по какой-то причине он не работает в IE ... Что я делаю не так?

HTML 

<body>
    <div id="container">
        <div id="header">
            <img src="logo.png">
        </div>

        <div id="top-nav">
            <ul class="menu">
                <li class="first leaf menu-mlid-471"><a href="">Home</a></li>
            </ul>
        </div>
    </div>
</body>

CSS 

body{
   background-color: #fff;
   margin: 0;
   padding: 0;
 }
ul.menu{
   width: 500px;
   margin: auto;
 }
 #header{
   height: 150px;
 }

Для Firefox, Chrome, Safari, ... без проблем. Все идет точно посередине. Но IE отказывается правильно его выравнивать ...

Ответы [ 4 ]

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

На самом деле, если вы поместите рамку вокруг элемента меню, в IE вы увидите, что DIV выровнен по центру, однако ваш контент ul - нет.Пожалуйста, вставьте это в свой CSS и посмотрите, какие результаты вы получите: 

ul.menu{
width: 500px;
margin: auto;
border:solid black thin;
text-align:center;
}

Должно работать в IE.

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

Есть ли у вас doctype?Без этого IE возвращается в режим Quirks, который не поддерживает центрирование margin: auto;.

Кроме того, IE <6 вообще не поддерживает центрирование <code>margin: auto; (в случае, если древняя поддержка браузера IE особенно важна для вас).

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

Попробуйте это .ie ul.menu{ width: 500px; margin-left: auto; margin-right:auto; display:block;}

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

Используйте ниже CSS 

.ie ul.menu{
           width: 500px;
           margin: auto;
           display:block;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...