Results 1 to 2 of 2

Thread: Vertically align images in a div

  1. #1
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    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 08:33 AM.

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

    Default

    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:
    http://www.ibloomstudios.com/article...ertical-align/
    http://www.jakpsatweb.cz/css/css-ver...-solution.html

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
  •