导航菜单不会居中对齐

Question

我在对齐菜单中心时遇到问题。

尝试将导航和环绕导航class设置为

margin 0 auto; width: 100%;

但仍然无法正常工作，因此已将其还原为下面链接的示例。

我创建了一个 jsfiddle 页面来显示现在的菜单。如您所见，它位于左侧，我想让它居中。

如果有人能提供帮助，将不胜感激。

Answer 1

我设法使用以下方法居中：

.menu ul {
    display:inline-block;
}

.menucentre {
    text-align:center;
}

Answer 2

做了两件事：

1) 添加 "text-align: center;" 到“.menu ul”

.menu ul {list-style: none;margin: 0;padding: 0; text-align: center; }

2) 从“.menu ul li”中删除浮动并添加显示内联块。

.menu  ul li {position: relative; display:inline-block; background-color: #333;padding: 6px 5px 0px 5px; margin: 17px;}

Answer 3

enter link description here这样居中将导航样式更改为： nav {margin:15px 0px;text-align: center;}

同时将 display:inline-block 添加到 .menu ul .menu ul {list-style: none;margin: 0;padding: 0;display:inline-block}

Nav menu will not align to center