CSS垂直文本对齐

Question

我有一个div，其中包含图像和跨度。我希望跨度中的文本与图像中间对齐。当然，为了您的方便，我做了一个fiddle。

下面是HTML：

<div id="legend"> 
    <img src="http://fate.holmes-cj.com/plus.png"/> 
    <span> * 5</span> 
</div> 

这里有一些我已经试过的东西：

• span {vertical-align:middle;}似乎什么也不做。
• span {vertical-align:top;}将文本对齐到图像的顶部。你会认为如果top有效，那么middle。
• span {vertical-align:20px;}给了我我想要的，但它取决于（并与之互动）div高度，图像高度和字体大小。
• 添加display:table-cell已在SO上的其他地方提出，但在Chrome中似乎什么都不做。

您可以在我的Fate Dice Roller的上下文中看到问题。点击“滚动”几次，然后将鼠标悬停在直方图上。你在骰子上获得了一些整齐的统计数据，但文本部分没有对齐。

我只是在这里运气不好，或者是垂直排列真的应该是这个混乱？当我改变字体大小时，我会喜欢一个不需要调整的解决方案。

Answer 1

在这里你去：http://jsfiddle.net/nYbwf/3/

图像元素只是vertical-align: middle，这样它会垂直正中间，而不是基线对齐。