Question

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

此解决方案在IE中无效。是否有其他解决方案可以在IE中使用，只有HTML / CSS？

如果你想仔细查看我的代码，我已粘贴here。

Answer 1

How about this?适用于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>来删除它。希望它有所帮助。

IE中的CSS菜单中的中心LI元素？

1 个答案: