trouble centering contens of a DIV using CSS

  • Thread starter Thread starter Jeff
  • Start date Start date
J

Jeff

Hi

ASP.NET 3.5

I'm using this CSS to horzontally center the menu on the page. (center the
contens inside a DIV)
This works great in IE7, but in Opera it doesn't center, the menu is placed
to the left inside the DIV

Any suggestions on how to fix this so it centers the menu in Opera?

#menuline
{
/*background-color:#336699; */
background-color:Green;
width:100%;
text-align:center;
padding-top:5px;
padding-bottom:5px;
padding-left:auto;
padding-right:auto;
}
 
Here is the markup of the menu:

<asp:Menu ID="Menu1" runat="server" SkinID="menu"
CssClass="menu" DataSourceID="smdsAnonymous"
StaticDisplayLevels="2"
Orientation="Horizontal">
</asp:Menu>
<asp:SiteMapDataSource ID="smdsAnonymous" runat="server"
SiteMapProvider="Anonymous" />

One strange thing is that if I replace the menu markup with some random
text, then that random text is displayed centerered....
But that doesn't happend to the menu.. what do I do wrong?

BTW, I have the markup have passed the http://validator.w3.org/ tests.
 
Jeff said:
Hi

ASP.NET 3.5

I'm using this CSS to horzontally center the menu on the page. (center the
contens inside a DIV)
This works great in IE7, but in Opera it doesn't center, the menu is placed
to the left inside the DIV

Any suggestions on how to fix this so it centers the menu in Opera?

#menuline
{
/*background-color:#336699; */
background-color:Green;
width:100%;
text-align:center;
padding-top:5px;
padding-bottom:5px;
padding-left:auto;
padding-right:auto;
}
Click to expand...

Try using margin instead:

margin-top:5px;
margin-right:auto;
margin-bottom:5px;
margin-left:auto;

or simply:

margin: 5px auto 5px auto;

or even simpler:

margin: 5px auto;
 
thanks, but it's not fixing the problem. Thank you for your suggestion. I've
been investigating this problem a bit futher and sees that if I replace the
menu with some random text, then the random text is centered. But the menu
is not centered. I don't understand why
 
Jeff said:
thanks, but it's not fixing the problem. Thank you for your suggestion. I've
been investigating this problem a bit futher and sees that if I replace the
menu with some random text, then the random text is centered. But the menu
is not centered. I don't understand why
Click to expand...

You have to apply the margin to the inner element, not the container.
 
Back
Top