CSS垂直文本对齐

Question

我有一个div,其中包含图像和跨度.我希望跨度中的文本与图像中间对齐.当然,为了方便起见,我做了一个小提琴.

这是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在图像元素上那样,它将在中间垂直对齐而不是基线.