how to vertically align text next to a floated image?

Question

I want to vertically align a span after a floated image. I searched for it in stack overflow and find this post. but my image is floated.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

I give vertical-align:middle to image and nothing change!

Thanks

Answer 1

First remove float from it. Write like this:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Check this http://jsfiddle.net/ws3Uf/