在IE的CSS菜单中居中LI元素？

Question

我需要居中一个宽度未知的CSS菜单.我找到了解决方案.通过将UL标签设置为display:table或display:inline-table,LI元素可以在中心对齐.

这个解决方案在IE中不起作用.是否有其他解决方案可以在IE中使用,只有HTML/CSS？

如果你想好好看看我的代码,我已经粘贴在这里.

Answer 1

这个怎么样？适用于IE6,IE7,Firefox.

标记:

<div id='menu-centered'>
    <ul>
        <li><a href="">My first item</a></li>
        <li><a href="">My second item</a></li>
        <li><a href="">My third item</a></li>
        <li><a href="">My fourth item</a></li>
        <li><a href="">My fifth item</a></li>
    </ul>
</div>

CSS:

#menu-centered {
    background-color: #0075B8;
    padding: 10px;
    margin: 0;
}

#menu-centered ul {
    text-align: center;
    padding: 0;
    margin: 0;
}

#menu-centered li {
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

#menu-centered a {
    font: normal 12px Arial;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    background: #57a8d6;
}

#menu-centered a:hover {
    background: #5fb8eb;
}

整个事情的关键基本上text-align: center;是在<ul>元素上做.你也从来没有真正想要做的事情display: table;- 它只是hackish,因为你发现不适用于所有的浏览器.由于这种方式避免浮动,你也不需要在那里有清晰的元素,虽然你可以通过添加overflow: auto;到那里删除它<ul>.希望能帮助到你.