居中 CSS 菜单答案

【问题标题】：centering a css menu居中 CSS 菜单
【发布时间】：2013-08-12 11:02:18
【问题描述】：

我无法让这个菜单居中。我在<ul> 和margin:auto; 上尝试了text-align:center;。我不确定我是否必须浮动任何东西，或者更改显示设置

【问题讨论】：

【解决方案1】：

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

#navcontainer {
    text-align: center;   
}

现场演示：jsFiddle

第二种方法：给容器<div>一个固定宽度并使用margin:auto：

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

现场演示：jsFiddle

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我也在研究这个。我在这里找到了最佳答案：https://stackoverflow.com/a/17634702/2537445

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

至于您的特定锚点，您将无法使用 display: block 来阻止它们。

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

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

【讨论】：