水平居中的asp菜單

Question

我無法水平居中菜單欄。沒有。主菜單項可能包含/決定。與每個用戶登錄。該代碼使菜單欄從左側開始處於30％。 嘗試顯示：內聯塊和顯示：#menuContainer的表格。

如果有5個主菜單項，並且我將#menuContainer的寬度設置爲30％，它將顯示居中。

ASPX：

<div id="divMenu"> 
<div id="menuContainer"> 
    <asp:Menu id ="menuBar" runat="server" Orientation="Horizontal" 
    IncludeStyleBlock="false"> 
    <item> 
    <asp:MenuItem Text="Home"></asp:MenuItem> 
    <asp:MenuItem Text="Folio"> 
     <asp:MenuItem Text="Nature"></asp:MenuItem> 
     <asp:MenuItem Text="People"> 
     <asp:MenuItem Text="Tribe"></asp:MenuItem> 
     </asp:MenuItem>  
    </asp:MenuItem> 
    <asp:MenuItem Text="Contact"></asp:MenuItem> 
    </items> 
    </asp:Menu> 
    </div> 
</div> 

CSS：

#divMenu 
{ 
position:fixed; 
left:0; 
top:7%; 
z-index:2; 
width:100%; 
height:5%; 
} 
#menuContainer 
{ 
width:50%; 
margin:0 auto; 
} 
#menuBar 
{ 
position:fixed; 
top:5.3%; 
} 
#menuBar ul 
{ 
list-style:none; 
background-color:silver; 
padding:0 5px; 
} 

呈現的HTML：

<div id="divMenu"> 
    <div id="menuContainer"> 
    <a href="#menuBar_SkipLink"><img alt="Skip Navigation Links" src="/..sometext" 
    width="0" height="0" style="border-width:0px;" /></a> 
    <div id="menuBar"> 
     <ul class="level1"> 
     <li><a class="level1" href="#" onclick="...">Home</a></li> 
     <li><a class="popout level1" href="#" onclick="..">Folio</a> 
      <ul class="level2"> 
       <li><a class="level2" href="#" href="#" onclick="..">Nature</a></li> 
       <li><a class="level2" href="#" href="#" onclick="..">People</a> 
        <ul class="level3"> 
        <li><a class="level3" href="#" onclick="..">Tribe</a></li> 
        </ul> 
       </li> 
      </ul> 
      </li> 
      <li><a class="level1" href="#" onclick="...">Contact</a></li> 
     </ul> 
</div><a id="menuBar_Skiplink"</a></div></div> 

Answer 1

http://jsfiddle.net/Cck3V/

<div id="divMenu"> 
<div class="menuContainer"> 
     <a>Item 1</a> 
     <a>Item 2</a> 
    </div><br><br> 
<div class="menuContainer"> 
     <a>Item 1</a> 
     <a>Item 2</a> 
     <a>Item 3</a> 
    </div><br><br> 
<div class="menuContainer"> 
     <a>Item 1</a> 
     <a>Item 2</a> 
     <a>Item 3</a> 
     <a>Item 4</a> 
    </div><br><br> 
</div> 

-

-- css -- 
#divMenu {position:fixed;text-align:center;left:0;right:0;top:7%;z-index:2;height:5%;} 
.menuContainer {display:inline-block;margin:0 auto;background-color:silver;text-align:left;clear:both;}