How do I vertical-align a span with an image that is floating to the right?

I'm trying to do something very similar to the aligning text next to an image question: Vertically align text next to an image?

The difference is, I want the image to float to the right, but it seems when I make it float:right;, the vertical-align that solved that problem doesn't work anymore? Is there a way to have the img float to the right AND have the text still middle aligned to it?

<div style="width:100px">   
   <span style="vertical-align:middle">Doesn't work.</span>
   <img style="vertical-align:middle开发者_运维百科;width:30px;height:30px;float:right">
</div>

Thanks in advance!

Make the line-height the same as the image.

Remove the float: right from the image. For the div, place text-align: right. It should solve the problem.

<div style="width:100px; text-align: right;">   
   <span style="vertical-align:middle;">Does work.</span>
   <img style="width:30px;height:30px; vertical-align: middle;">
</div>

Hope this helps. :)