...

View Full Version : How do you center an image when using absolute positioning in CSS?



soxnutt04
10-22-2007, 12:34 AM
I'm working on a site and I can't figure out how to tell the banner to be centered
without manually positioning in with CSS. is this even possible? and if not are there any other ways of doing this anyone knows of?

also if it helps, the problem only occurs i think when the screen reslution is greater then 1000 pixels because thats what my positining is base on

here is the CSS code i'm using to position it

img.banner
{
position:absolute;
top:25px;
right:50px;
z-index:0;
}

and heres a link to the site

http://www.229inc.net/thedeathroses

any help would be great
Thanks

medigerati
10-22-2007, 03:59 AM
I'm pretty certain you can't center an absolutely positioned element without css.

But looking at your code, you have a 'div' around your image. Why not absolutely position the div and 'text-align' center the image. The css for that would be:



<div class="banner"><img ..." /></div>




div.banner {
position:absolute;
text-align:center;
top:25px;
width:100%;
}


Notice that I removed all CSS from the img declaration. Make sure the img is not absolutely positioned.

Hope that helps!

dcostalis
10-22-2007, 05:24 AM
Another option for you.


div.banner {
background-image:URL('./banner.jpg');
background-position:top center;
height:257px;
width:900px;
top:25px;
width:100%;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum