如何水平對齊ul＃菜單與頁面

我遇到麻煩（水平地）將我的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。

歡呼任何建議。

小提琴：http://jsfiddle.net/HcfMT/

來源

2014-03-28 user3227878

也許小提琴會很棒嗎？ – Idris

http://jsfiddle.net/HcfMT/我會在這個問題中挑選它。正如你所看到的，它會粘在頁面的左側，而不是在中間，我相信這個頁邊空白：auto;和margin-right：auto;從menucontainer應該做的。 – user3227878

嘗試'文本對齊：中心;'到'＃menucontainer'：http://jsfiddle.net/MC2AT/ –

的問題是，它的絕對位置。擺脫這一點，因爲你無論如何都在濫用它。

http://jsfiddle.net/HcfMT/2/

width:700px; 
margin-top:158px;

來源

2014-03-28 00:18:22 bjb568

哦！我不能相信我錯過了這一點。我開始時希望它位於右側15px處，之後決定改爲將它居中並保持它的位置。非常感謝您的幫助！ – user3227878

這是一個簡單的解決...你是非常接近擁有它。

#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; 
}

你需要相對定位的#menucontainer。

來源

2014-03-28 00:23:58

如何水平對齊ul＃菜單與頁面

回答

相關問題