Results 1 to 2 of 2

Thread: Vertically align images in a div

  1. #1
    Join Date
    May 2007
    England, UK
    Thanked 6 Times in 6 Posts

    Question Vertically align images in a div

    I'm pretty confident when it comes to HTML and CSS but I cant for the life of me work out how to Vertically align images in a div.

    I need to vertically align them in the middle.

    The reason being is that the images are inserted dynamically, all of them have the same width but the height is variable therefore affecting the overall look.

    i've tried:
    1. margin-top:auto; & margin-bottom:auto;
    2. vertical-align:middle;
    3. text-align:center;

    Any other ideas would be appreciated!
    Last edited by jc_gmk; 07-19-2007 at 07:33 AM.

  2. #2
    Join Date
    Feb 2007
    Thanked 0 Times in 0 Posts


    You would think it would be simple, but vertical-align doesn't work the way most would expect it to, unless the element is in a table. You could simply add a table in the area in which you want to display the image and set the style for the td as vertical-align:middle.
    There are also various workarounds if you want to avoid the use of tables.
    Two good ones are:


Posting Permissions

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