水平居中的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;}