<div align=center> also affects align of dynamic dropdown item text

  • Thread starter Thread starter Steve Richter
  • Start date Start date
S

Steve Richter

I am using <div align=center> to center a horizontal menu on the page.
Problem is the center align of the div is rippling down to the menu
items and causing the text of the dynamic popup sub menu items to be
centered also. How can I center my navigation menu without centering
the menu item text?

thanks,

-Steve


<div align=center>
<asp:menu id="NavigationMenu"
staticdisplaylevels="2"
staticsubmenuindent="10"
orientation="Horizontal"
target="_blank" StaticMenuItemStyle-ItemSpacing="1em"
StaticEnableDefaultPopOutImage=false
runat="server">

<dynamicmenustyle backcolor="LightSkyBlue" HorizontalPadding="1em"
forecolor="Black"
borderstyle="Solid"
borderwidth="1"
bordercolor="Black" />

<items>
<asp:menuitem navigateurl="Home.aspx"
text="Home"
tooltip="Home">
<asp:menuitem navigateurl="Music.aspx"
text="Music"
tooltip="Music">
<asp:menuitem navigateurl="Classical.aspx"
text="Classical"
tooltip="Classical"/>
<asp:menuitem navigateurl="Rock.aspx"
text="Rock"
tooltip="Rock"/>
<asp:menuitem navigateurl="Jazz.aspx"
text="Jazz"
tooltip="Jazz"/>
</asp:menuitem>
<asp:menuitem navigateurl="Movies.aspx"
text="Movies"
tooltip="Movies">
<asp:menuitem navigateurl="Action.aspx"
text="Action"
tooltip="Action"/>
<asp:menuitem navigateurl="Drama.aspx"
text="Drama"
tooltip="Drama"/>
<asp:menuitem navigateurl="Musical.aspx"
text="Musical"
tooltip="Musical"/>
</asp:menuitem>
</asp:menuitem>
</items>

</asp:menu>
</div>
 
I am using <div align=center> to center a horizontal menu on the page.
Problem is the center align of the div is rippling down to the menu
items and causing the text of the dynamic popup sub menu items to be
centered also. How can I center my navigation menu without centering
the menu item text?

The easiest and most reliable way is to stop using deprecated syntax such as
align=center... :-) There is absolutely no guarantee at all how long this
will continue to be supported by subsequent browser versions...

Instead, you should seriously consider making your HTML markup
XHTML-compliant.

In this specific case, you need:

<div style="margin-left:auto;margin-right:auto;">
 
Back
Top