I'm having trouble centering the menu bar horizontally. The number of main menu items can change with each user login. Currently, the menu bar is starting around 30% from the left. I have attempted using display: inline-block and display: table for #menuContainer.
When there are 5 main menu items and I set the width of #menuContainer to 30%, it seems to be centered.
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;
}
RENDERED 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>