css - 居中 CSS 菜单

Question

我在使这个菜单居中时遇到了一些麻烦。我尝试text-align:center;了<ul>and 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:auto 仅在您为容器 ( <ul) 提供固定宽度时才有效。

见：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;
}