trouble centering contens of a DIV using CSS

[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;
}

 

[Jeff]

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.

 

[Göran Andersson]

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;
}

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;

 

[Jeff]

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

 

[Göran Andersson]

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

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

 

[James Wilson]

try using the <center></center> tags

 

[Göran Andersson]

try using the <center></center> tags

Deprecated since 1999...

http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2