...

View Full Version : Centering image vertically and horizontally



zach4618
05-13-2007, 12:33 AM
I am trying to get an image to center horizontally (the easy part) and vertically over an entire page. I want the image to be in the exact center no matter the resolution or browser. To do this, I divided the image into four equally sized parts or quadrants and positioned each absolutely. The top left image is 50% from the right and from the bottom, top right is 50% from the left and from the bottom, and so on.

This method works perfectly in FF, opera, safari, and IE6. IE7 creates a 1px space between all the images because 50% of the page is an even amount, making the exact center 1px beyond the image. All the other browsers add this space to the other side of the image, maintaining the illusion of a single image.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
margin: 0;
}

img#splash-bottomleft {
position: absolute;
right: 50%;
top: 50%;
}

img#splash-bottomright {
left: 50%;
position: absolute;
top: 50%;
}

img#splash-topleft {
bottom: 50%;
position: absolute;
right: 50%;
}

img#splash-topright {
bottom: 50%;
left: 50%;
position: absolute;
}
</style>

</head>
<body>

<img alt="splash" id="splash-topright" src="images/splash-topright.gif" />

<img alt="splash" id="splash-bottomright" src="images/splash-bottomright.gif" />

<img alt="splash" id="splash-bottomleft" src="images/splash-bottomleft.gif" />

<img alt="splash" id="splash-topleft" src="images/splash-topleft.gif" />

</body>
</html>

zach4618
05-13-2007, 07:28 AM
I found a better way to do it if anyone is interested:


div#splash {
margin: -150px -150px 0 0; /*margins should be half width and height*/
position: absolute;
right: 50%;
top: 50%;
height: 300px;
width: 300px;
}


<div id="splash">
<img alt="splash" src="images/splash.gif" />
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum