Log in

View Full Version : Vertically align images in a div



jc_gmk
07-18-2007, 03:54 PM
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!

Veronica
07-18-2007, 06:55 PM
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/articles/applied_css_vertical-align/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html