I am unable to centre the menu bar horizontally. The no. of main menu items may inc./Dec. with each user login. This code makes the menu bar start at like 30% from the left.
Tried display:inline-block and display:table for #menuContainer.
If there are 5 main menu items and I set the width of #menuContainer to 30%, it appears centred.
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;
}