如何将文字的垂直中心与图像的垂直中心对齐？

Question

如何将文本的垂直中心与图片的垂直中心对齐？在我看来，以下代码仅使文本的基线与图像的垂直中心对齐。我想有一个身体平衡感。

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

输出

HTML

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

CSS

img { 
    vertical-align: middle; 
} 

span { 
    font-size: 3em; 
} 

Answer 1

您还没有给出中间垂直对齐的文本。将vertical-align: middle;添加到跨度CSS，它应该工作。