Printable View
I'm trying to position 3 images that stay in the middle of the screen regardless of the resolution and without using a table to do it. I think it can be done via a style sheet, but how?
<div class="x">
<img alt="front_1.gif (3K)" src="Images/front_1.gif" height="54" width="700"><br>
<img alt="front_2.gif (10K)" src="Images/front_2.gif" height="63" width="700"><br>
<img alt="front_3.gif (13K)" src="Images/front_3.gif" height="61" width="700"><br>
</div>
These would be the images
Yes, CSS
You can set "margin:auto;" on the img tags for the "correct" way to do it, which would center it in the middle of the div. For IE, you'll need to add "text-align:center;" to the div tag.
Do you want vertical alignment as well? You could use absolute positioning the put the images wherever you want, and use some javascript to compute it on the fly, but in my experience, while you can get the screen resolution with "screen.width", etc, its trickier to get the actual size of the browser's "canvas".
Thanks for that, do you have an example of the vertical alignment ,I've been trying for ages to get that to work, but having no luck.
It's easier using tables to center it both horizontally and vertically.
You could use this:
<table border=0 cellpadding=0 cellspacing=0 height="100%" width="100%">
<tbody>
<tr align=middle>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td>
<img alt="front_1.gif (3K)" src="Images/front_1.gif" height="54" width="700"><br>
<img alt="front_2.gif (10K)" src="Images/front_2.gif" height="63" width="700"><br>
<img alt="front_3.gif (13K)" src="Images/front_3.gif" height="61" width="700"><br>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>