CSS: Vertical align text next to image

Today I was working with an image and some text which I had to put next to it. The issue which was coming was to vertical align the text to middle of image.

<div>
   <img style="height:50px" src="http://jsfiddle.net/img/logo.png"  />
   <span style="vertical-align:middle">:( Not coming in the middle.</span>
</div>

Here is the code which was not working http://jsfiddle.net/cY6Lq/ .

As you can see the text is not vertically at the middle. The solution to fix is to apply vertical align: middle style to image instead on text.

<div>
   <img style="vertical-align:middle" src="http://s.gravatar.com/images/logo.png"  />
   <span>Works :).</span>
</div>

Here is the updated url. http://jsfiddle.net/cY6Lq/1/  . Now you can see the text is coming at vertically middle position.