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

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中它应该可以正常工作。