CSS to center layer

[cybercampbell]

Hi all

I have a layer and I'm needing it to be in the exact center of the page at whatever resolution or browser size. all the layers attrabutes are set in the style tag like this:


#main {
position:absolute;
overflow: visible;
left: 10%;
width: 763px;
height: 524px;
top: 30px;
visibility: visible;
}


Any ideas

Chris

[BonRouge]

body { margin : auto; text-align:center;}

[Paul Jr]

The margin: auto; should be applied to the element to be centered; the text-align: center; applied to the BODY is to make IE 5.x play nice; the element to be positioned must have a width defined; absolute positioning will override the margin: auto;.

[Shmohel]

if you want it to be exactly centered then why are you making position:absolute?

margin: x auto x auto;

replace the x's with any necessary top and bottom margins, but this will center block elements.

[cybercampbell]

I did this:

#main {
margin: 30 auto 0 auto;
text-align:center;
overflow: visible;
height: 524px;
visibility: visible;

}

but the margin: 30 auto doesn't work in Firefox, it works fine in IE.

Any ideas?

Cheers
Chris

[Shmohel]

can you post a link?

[ajimenez]

if you want it to be exactly centered then why are you making position:absolute?
I just posted a thread basically asking the same thing. The reason I have the div positioned absolutely is because it's layered, I need to have the z-index in there.

div#box {
position: absolute;
left: 300px
right: 300px;
text-align: center;
border: 2px solid red;
z-index: 20;
}

[Shmohel]

send me a link....i can help you out.

[Paul Jr]

Originally posted by cybercampbell
I did this:

#main {
margin: 30 auto 0 auto;
text-align:center;
overflow: visible;
height: 524px;
visibility: visible;

}

but the margin: 30 auto doesn't work in Firefox, it works fine in IE.

Any ideas?

Cheers
Chris
Two things: the element must have a width defined or else the margin will do nothing, and you need a unit identifier (px, em, ex, pt, pc, ect.) for any non-zero value.