Html 居中的CSS菜单（我已经查看了许多答案，但无法找到这个答案）

事先我很抱歉，我知道关于这个话题的多个帖子是一个累赘。。但我已经尝试了至少10种不同的解决方案，不明白为什么这个菜单不能居中

以下是我想要的实时屏幕截图菜单：

如果您想查看完整的源代码，请访问“生活”页面：

提前谢谢。 CSS

---

不要在

li

元素上使用浮动，而是使用

display:inline块

您必须增加

ul

元素的总体大小，或者减少

li

元素的填充/边距，因为它们的总宽度超过页面的50%

更改此项：

#menu li {
    float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

为此：

#menu li {
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    box-shadow: 1px 0 0 #444;
    display: inline-block;
}

---

如果你创建了一个我可以给你看一个工作示例…

请不要链接到外部网站，而是在你的帖子中包含你的相关CSS和HTML标记。如果你除了发布代码之外还需要展示一个工作示例，那么在上面创建一个提琴并链接到它。这些看起来几乎一样。。。具体问题是什么？在我看来，这是个中心问题。

#menu li {
/* float: left;  --> Delete this*/
display: inline-block; /*use this */
}

#menu li {
/* float: left;  --> Delete this*/
display: inline-block; /*use this */
}