How do you align the vertical center of text to the vertical center of an image?

How do you align the vertical center of text to the vertical center of an im开发者_如何学JAVAage? It appears to me that the following code only makes the baseline of the text align to the vertical center of the image. I would like to have a physical sense of balance.

http://jsfiddle.net/tokyotech/TBbJF/

Output

HTML

<img src="image.png" />
<span>Foo</span>

CSS

img {
    vertical-align: middle;
}

span {
  font-size: 3em;   
}

You haven't given the text a vertical align of middle. Add vertical-align: middle; to the span css and it should work.