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

Question

如何将文本的垂直中心与图像的垂直中心对齐？在我看来，以下代码仅使文本的 baseline 与图像的垂直中心对齐。我想要 body 上的平衡感。

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; 添加到 span css 中，它应该可以工作。