html - 在 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 并且你发现它并不适用于所有浏览器。由于这种方式避免了浮动，因此您也不需要在其中包含 clear 元素，尽管您可以通过添加overflow: auto;到<ul>. 希望能帮助到你。