Question

我正在尝试水平对齐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拒绝正确对齐它......

Answer 1

使用以下CSS

.ie ul.menu{
           width: 500px;
           margin: auto;
           display:block;
 }

Answer 2

你有doctype吗？没有它，IE将恢复为Quirks模式，它不支持margin: auto;居中。

此外，IE＆lt; 6根本不支持margin: auto;居中（如果古老的IE浏览器合规性对你特别重要）。

Answer 3

试试这个.ie ul.menu{ width: 500px; margin-left: auto; margin-right:auto; display:block;}

Answer 4

实际上，如果你在菜单div周围放置一个边框，你会在IE中看到DIV在中心对齐，但是你的ul内容不是。请将其弹出到您的CSS中，看看您得到了什么结果：

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

应该在IE中工作。

水平对齐在IE中不起作用

4 个答案: