我的css导航菜单拒绝在浏览器中居中？

我试过所有的地方来放

margin-right: auto

及

使用

display: inline-block

在实际链接上运行良好，但如果添加为父级，则会破坏菜单

我觉得为了使它在浏览器视口中居中，我需要丢失一些样式。我觉得有一个冲突之间的某些方面的风格，是防止中心

我希望我错了，有人的建议是可能的

亲切问候,， 戴尔

这是我的CSS：

.navigation {
    height: auto
    width: 96%;
    border-top-color: rgb(119,120,122);
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: rgb(119,120,122);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-top: 1%;
    margin-right: auto;
    margin-bottom: 1%;
    margin-left: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: transparent;
    background-image: none;
}

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}

ul li {
    display: inline;
}

ul li ul {
    display: none;
}

ul li:hover ul {
    height: auto;
    width: 96%;
    display: block;
    position: absolute;
    margin-right: auto;
    margin-left: auto;
}

ul li a {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 0.15%;
    margin-bottom: -0.2%;
    padding-top: 1.25%;
    padding-right: 1.4%;
    padding-bottom: 1.25%;
    padding-left: 1.4%;
}

ul li:hover ul a {
    margin-right: -0.2%;
    margin-bottom: 0;
}

---

另外，我把我的评论和任何非必要的代码拿出来，我意识到我用的是长手笔的CSS，但我喜欢这样做-

不居中显示的原因是，持有菜单的ul没有指定宽度；因此，它以100%宽度渲染；换句话说，处于自动状态的左/右页边距没有任何影响

---

尝试将文本对齐：居中添加到ul，以便在线的lis能够居中。

最简单的方法是将宽度添加到顶层，例如：

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    width:80%;
    text-align:center;
}

---

编辑：对不起，我误读了这个问题，我以为你只是希望整个菜单不跨越整个窗口的宽度，而不是菜单内容的中心。添加文本对齐：居中；正如@Jacob已经建议的那样，我的答案是否定的。

我会尝试一下，但我觉得我已经尝试过了，但没有成功，默认的左对齐方式仍然存在。我想我误解了这个问题。我最初的回答只是停止了整个视窗宽度的菜单，而不是将菜单内容居中。谢谢Jacob，这听起来很有希望。我明天会回来告诉你们事情的进展。谢谢你们！这个建议奏效了。有趣的是，我模糊地意识到可以应用文本对齐来定位除文本以外的元素，但这让我想起了以前使用表格进行布局的网页设计的糟糕日子。我已经合并了您未注册的帐户。你现在可以在“答案”下留下评论，编辑你的问题，并希望接受对你帮助最大的答案。

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    width:80%;
    text-align:center;
}