以css菜单为中心

Question

我在使这个菜单居中时遇到了一些麻烦。 我在text-align:center;和<ul>上尝试了margin:auto;。 我不确定是否需要浮动任何东西，或更改显示设置

JSFiddle：http://jsfiddle.net/FQ3mK/

Answer 1

第一种方法：使用<div>将容器text-align:center居中：

#navcontainer {
    text-align: center;   
}

现场演示：jsFiddle

<小时/>

第二种方法：为容器<div>提供固定宽度并使用margin:auto：

#navcontainer {
    width: 600px;
    margin: auto;   
}

现场演示：jsFiddle

Answer 2

margin：仅当您为容器（<ul）提供固定宽度时，auto才有效。

请参阅：http://jsfiddle.net/FQ3mK/3/

Answer 3

我也在考虑这个问题。我在这里找到了最好的答案：https://stackoverflow.com/a/17634702/2537445

我认为这是最好的，因为它是最具动态，跨浏览器兼容的答案。

至于你的特定锚点，你将无法使用display：block。

但是，您可以在内联锚点的左侧和右侧应用填充，并填充内联li的顶部和底部以提供所需的间距。

#cssmenu ul {
   text-align:center;
}
#cssmenu ul li {
   display: inline;
}