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

Question

我已经尝试了所有放置的位置

margin-right: auto

，并且

margin-left:auto

在实际链接上使用效果

display: inline-block

非常好，但如果作为父项添加，则会与菜单混淆。

我觉得为了使其在浏览器视口的中心，我需要失去一些样式。我觉得样式的某些方面之间存在冲突，导致无法居中。

我希望我是错的，并且根据某人的建议是可能的......

亲切的问候， Dale

这是我的 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;
}

PS 我删除了我的注释和任何非必要的代码，我意识到我是用长手 CSS 编写的，但我喜欢这样做;-)

Answer 1

之所以没有居中显示，是因为保存菜单的 ul 没有指定宽度；因此，它以 100% 宽度渲染；换句话说，左/右页边距处于自动状态没有任何效果。

尝试将 text-align: center 添加到 ul 中，以便内联的 li 能够居中。

Answer 2

最简单的方法是为顶层

添加宽度，例如：

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

编辑： 抱歉，我读错了问题，我以为您只是 em> 希望整个菜单不跨越窗口的整个宽度，而不是使菜单内容居中。正如 @Jacob 已经建议的那样，将 text-align:center; 添加到我的答案中。