Results 1 to 3 of 3

Thread: Vertical align

  1. #1
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default Vertical align

    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 !
    Last edited by d-machine; 08-20-2011 at 09:53 PM.

  2. #2
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <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:

    Code:
    <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>
    Last edited by jscheuer1; 08-21-2011 at 02:29 PM. Reason: saw conflicting styles using Opera Inspect Element
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •