Centering links in DIV

[Yoeri]

Hello,

Here's another problem I am struggling with ...

I have a menu that consists of a DIV with anchors in it.

HTML Example:
-------------
<DIV class="Menu">
<A class="MenuItem" href="">Menu Item 1</A>
<A class="MenuItem" href="">Menu Item 2</A>
</DIV>

Styles:
-------
DIV.Menu
{
width: 20%;
text-align: center;
}

A.MenuItem
{
width: 150px;
display: block;
text-align: left;
}

In IE, I get a menu with centered menu-items that are aligned left.

In mozilla, I get a menu with everything aligned left.

I guess that Mozilla doesn't allow a text-align center to align block elements within a div ...

How can I do this?

Thanks

[madcat]

Yoeri- Welcome to Webmaster World.

You should set the margins to auto anyway, text-align should be used for text.

A.MenuItem 
 { 
 width: 150px; 
 display: block; 
 margin-left: auto; 
 margin-right: auto; 
 border: 1px solid #ccc; 
 text-align: left; 
 }

I think this is what you're trying to do. I put borders in to see what was happening.

[Yoeri]

Thanks

work like I want it :-)

Never used the auto value for the margins ... will take a look at what it exactly does .

[Yoeri]

I found another link in the forum that gives the solution ...

The text-align center is being used to center block alements in IE5 ... guess I am working to much with IE :)

[bluerobot.com ]