Vertical align

[d-machine]

Hi,

I've created this gallery: link

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>