PDA

View Full Version : Image Centering Problem


acidvisor
15 Jan 2007, 06:10 PM
I have been searching Forums and Online tutorials for day with no avail.
I am trying to vertically center and image (on the Y-axis I think).
This is made even harder by a background image that the image in the foreground needs to be aligned with. Any ideas are a big help.

This is my code so far


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Art House</title>
<style type="text/css">
<!--
body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
margin-top: 0px;
}
-->
</style></head>
<body>
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><td align="center" valign="middle"><img src="Home.jpg" width="800" height="600" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="63,561,180,581" href="index.htm">
<area shape="rect" coords="238,561,357,580" href="About.htm">
<area shape="rect" coords="432,561,550,580" href="Wines.htm">
<area shape="rect" coords="596,561,756,580" href="contact.htm">
</map></td>
</tr>
</table>
</div>
</body>

So basically I have two elements to my page a background image and a foreground image. They need to be aligned. I can successfully center the background image with the


background-position: center center;

command. So I need a way to align the foreground image with this.
The end result being that the whole back is centered leaving equal amounts of black on top and bottom of screen whilst optimizing the resizing capabilities.

Thanks
Ben
Wickham
16 Jan 2007, 03:18 AM
I've just added a background-image to my centered link here:-
http://www.wickham43.supanet.com/tutorial/centerphotolink.html

It comprises a div with position: absolute, centered so that it is centered on x and y axes. To get a div or image centered on the y axis with CSS you have to use position: absolute.

The div is 250*250px with a 250*250px gray background-image and has text-align: center to centralise the inner image on the x axis. Inside is an image 200*200px which is a link and has a margin-top to center on the y axis The margin-bottom: -3px is to get rid of a small space that some browsers create under an image.

My earlier example only had the center image link but when I saw your post I added the gray 250*250 image as a background-image to the page body centered both ways and it worked in IE7 but for some reason I don't understand in Firefox the gray image was centered at the top of the window not centered on the y axis. It should center on the y axis. So I added it to the div instead.

So in my example the background-image and the inner image are in the same div (you don't need the table).

You have to be careful using position: absolute with large divs or images and you will have trouble using this method with your 800*600 image size. In your case the div would be set top: 50%; left: 50%; margin-top: -300px; margin-left: -400px;. At window resolutions below 800*600 the margin-left and margin-top will take the div and image out to the left or over the top and will not be scrollable to top or left.

For large divs and images the css method I used is not suitable; javascript which sniffs the window size would be a better solution.