Vertical Align Images?

[kensbeijing]

I can't seem to find out how to vertically align an image to the center. People say vertical-align works but it doesn't seem to do anything. I have a div sized 440 x 440 px, with a 440 x 300px wide image inside. How would I align this vertically center?

[chibineku]

Well, vertical-align: middle does usually work. The other way is to give your image display: block and use margin: auto 0; That ought to work. Or give it a line height equal to the height of the div.

[Ingolme]

First, you need to apply vertical-align to the image, not the container. After that, you have to make the line-height of the container equal to its height.This only works for text and images that stay on one line. If there's a line break, it will all get sent below the <div>.If you want some multiline text to be vertically aligned like in a table cell, you'll need two containers that work like this:http://dtfox-tests.totalh.com/valign.html

[kensbeijing]

First, you need to apply vertical-align to the image, not the container. After that, you have to make the line-height of the container equal to its height.This only works for text and images that stay on one line. If there's a line break, it will all get sent below the <div>.If you want some multiline text to be vertically aligned like in a table cell, you'll need two containers that work like this:http://dtfox-tests.totalh.com/valign.html

Still doesn't work, does the container have to have a special display:block or something. At the moment the container is floating left.

[dsonesuk]

it seems to work in IE7, but firefox, displays it at the top, unless text is include with image.however using   with span, and making container slightly larger i managed to get it to work<div style="width: 442px; height: 440px; line-height: 440px; text-align:center; border: 1px solid #000;"><span style="font-size:0px;"> <img src="1cha_imgash_thumb.gif" height="300" width="440" alt=" " style="vertical-align:middle;" /></span></div>