Position image in the dead center of my webpage

[Fysicus]

I need to get my image centered in the middle of my webpage, so when a browser using a resolution greater then 800x600 is used the imaged is cleanly centered in the middle of the screen.

I've been playing around with my CSS-settings, but so far no luck.

.oneColElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}


Can anyone tell me what I need to add to get my image to center properly?

[robbied72]

Originally Posted by Fysicus

I need to get my image centered in the middle of my webpage, so when a browser using a resolution greater then 800x600 is used the imaged is cleanly centered in the middle of the screen.

I've been playing around with my CSS-settings, but so far no luck.

.oneColElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}


Can anyone tell me what I need to add to get my image to center properly?

have you tried margin-left:auto; and margin-right:auto;

[AdRock]

Why don't you try to position the image like using top and left

Scrap that!!!

Why doin't you create a div to hold the image and align that center instead

[bengtec]

i read an interesting article somewhere. if you use the following code it works perfectly:

eg.
a 200x100 image

for horizontal center
{position:absolute; left:50%; margin-left:-100px;}

for vertical center
{position:absolute; top:50%; margin-top:-50px;}

basically the margin is half of the width of the element in negative

hope this helps

[bengtec]

oh yeah, so for both you use both in the same bit...

{position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px;}

[Fysicus]

Perfect. It works. Thanks very much dude

I changed my css to:

.oneColElsCtr #container {
position: absolute;
width: 46em;
left: 50%;
top: 50%;
background: #FFFFFF;
/* margin: 0 auto; the auto margins (in conjunction with a width) center the page */
margin-left: -400px;
margin-top: -300px;
text-align: left; /* this overrides the text-align: center on the body element. */
}


And the image alligns perfectly.

[alexgeek]

That's helpful, a lot of people need absolute centered pages for splash pages.

[bengtec]

please note: i havent tested this in IE6. when i have used similar principles on other pages i have found that IE6 hasnt displayed it properly. so watch out. someone might want to check this!!