如何將文字的垂直中心與圖像的垂直中心對齊？

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，它應該工作。