Vertical align

[d-machine]

Hi,

I've created this gallery: link (http://orlygraf.co.il/view1.php?id=1)

How can I vertically center the big image on the "showit" div without using the padding-top for every image?


Thanks in advance !

[d-machine]

Does anyone know? I really need your help. I saw many tutorials for vertical align, but I couldn't decide which one of them to apply in my site.

[jscheuer1]

You could use a table with a single row and a single td. The native vertical alignment of an image in a table cell (td) is middle.

So with a little luck you could simply replace:


<div id="photo1">
<a href="uploads/1/1.jpg">
<img src="uploads/1/1_thumb.jpg" alt="" border="0">
</a>
</div>

with:


<table>
<tr>
<td id="photo">
<a href="uploads/1/1.jpg">
<img src="uploads/1/1_thumb.jpg" alt="" border="0">
</a>
</td>
</tr>
</table>

Note: The td replaces the div. If you put a div in there, it will break the vertical alignment. As I'm sure you know by now, the vertical-align property has no effect on a division. Also, if you have an existing rule in your styles for the page that changes the vertical-align of td, you will have to specify vertical-align: middle; for this td.

I see you have conflicting styles, so best to put it all inline:


<table style="border-spacing: 0; border-width: 0; bordercollapse: collapse;">
<tr>
<td id="photo" style="vertical-align: middle; text-align: center; border-width: 0; bordercollapse: collapse; margin: 0; padding:0;">
<a href="uploads/1/1.jpg">
<img src="uploads/1/1_thumb.jpg" alt="" border="0">
</a>
</td>
</tr>
</table>