Html 如何将ul#菜单与页面水平对齐

我的ul#菜单无法（水平）居中于页面中间。这一切都是正常运作和预期的，我只是有问题的中心

以下是CSS：

ul#menu, ul#menu ul.sub-menu {
    padding: 0px;
    margin: 0px;
}

ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    padding: 0px;
    display: inline-block;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
    font-weight: bold;
    font-size: 17px;
}

ul#menu li a {
    padding: 15px;
}

ul#menu li {
    position: relative;
}

ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 46px;
    left: 15px;
    width: 150px;
}

ul#menu li:hover ul.sub-menu {
    display:block;
}

ul#menu li ul.sub-menu li a {
    background-color:grey;
    opacity:1;
    height:20px;
    border-bottom-style:solid;
    border-bottom-color:#30F;
    border-bottom-width:2px;
    padding:5px;
    font-weight:bold;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 12px;
}

#menucontainer {
    position:absolute; 
    width:700px;
    top:158px; 
    margin-left: auto;
    margin-right: auto;
    opacity:0.8; 
    z-index:20;
}

以下是HTML：

<div id="menucontainer">
<ul id="menu">
<li>
    <a href="/">Home</a>
</li>

<li>
    <a href="http://games.engagearcade.com">Games</a>
    <ul class="sub-menu">
        <li>
            <a href="http://descent.engagearcade.com">>> Descent</a>
        </li>

    </ul>
</li>

<li>
    <a href="http://prizes.engagearcade.com">Prizes</a>
</li>

<li>
     <a href="http://ladder.engagearcade.com">Ladder</a>
</li>

<li>
    <a href="http://community.engagearcade.com">Community</a>
    <ul class="sub-menu">
        <li>
            <a href="http://community.engagearcade.com">>> Submissions</a>
        </li>

        <li>
            <a href="http://support.engagearcade.com">>> Support/Help</a>
        </li>

    </ul>
</li>

<li>
    <a href="http://forums.engagearcade.com">Forums</a>
</li>

<li>
    <a href="http://about.engagearcade.com">About Us</a>
    <ul class="sub-menu">
        <li>
            <a href="http://about.engagearcade.com">>> Engage Arcade</a>
        </li>

        <li>
            <a href="http://involved.engagearcade.com">>> Those Involved</a>
       </li>

    </ul>
</li>
</ul>
</div>

很抱歉有这么多代码，但我不知道哪些部分与帮助解决问题相关。要寻找的主要东西是menucontainer

为任何建议干杯

---

小提琴：

问题在于它的位置绝对正确。把它扔掉，反正你误用了

---

这是一个简单的修复。。。你很快就要拥有它了

#menucontainer
    position:absolute; 
    width:700px;
    top:158px; 
    margin-left: auto;
    margin-right: auto;
    opacity:0.8; 
    z-index:20;

到

---

您需要相对定位“menucontainer”。

也许小提琴会很棒？我也会把它扔进问题里。正如你所看到的，它粘在页面的左边，而不是中间，我相信左边的边距是：auto；和右边距：自动；从菜单Container should do.try

text align:center

到

#menucontainer

：“我认为左边的边距：自动；右边的边距：自动；从menucontainer应该这样做”-当然他们不这样做，因为你完全定位了容器…哦！我真不敢相信我错过了。我一开始希望它的位置是从右边15px，后来决定改为居中，让它完全定位。非常感谢你的帮助！

#menucontainer
    position:absolute; 
    width:700px;
    top:158px; 
    margin-left: auto;
    margin-right: auto;
    opacity:0.8; 
    z-index:20;

#menucontainer {
    position:relative; 
    width:700px;
    top:158px; 
    margin: 0 auto;
    opacity:0.8; 
    z-index:20;
}