How can I vertically align an Image in a div/span?

Question

I've created a JSFiddle: http://jsfiddle.net/Q8uWv/

I'm trying to vertically align the image in the middle of thediv. Using vertical-align: middle isn't working. In additon to that I've tried margin-top:auto; margin-bottom:auto but still no luck. How can I get this image centered vertically?

Answer 1

To use vertical-align:middle; you'll need to add display:table-cell; to the container <div>:

http://jsfiddle.net/XXE2j/

Answer 2

I think that this is the best article about vertical centering http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

Add line-height: 200px; to the div in your example.