水平居中的asp菜单

Question

我无法将菜单栏水平居中。没有。主菜单项可能包括/十二月。每个用户登录。此代码使菜单栏从左侧开始大约 30%。 尝试了 display:inline-block 和 display:table 的#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;}