Centering text vertically, inside inline-block

Question

I need to vertically align the text inside a div to the center. Pretty much the only limitation (that I can think of, right away) is that the container must be inline-block, so I can't use table-cells with vertical-align.

HTML

<div id='w'>
   <img src='http://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG' />
   Lorem ipsum dolor sit amet...
</div>

CSS

html,body {margin:0;background:#333}
#w {margin:10px;background:#fff;padding:10px;display:inline-block}
img {width:20%;float:left}

(Wouldn't let me post without code, if I linked to jsfiddle..)

Here's a fiddle: http://jsfiddle.net/D5e9P/

Answer 1

Replace the image float with vertical-align:

img{width:20%;vertical-align: middle;}

See here: http://jsfiddle.net/D5e9P/1/

Answer 2

You can do it this way:

div#element-id {
    line-height: 20px; /* or the height of the div element */
    vertical-align: top;
}