我有一个 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 高度、图像高度和字体大小。- 在 SO 的其他地方建议添加
display:table-cell
,但在 Chrome 中似乎没有做任何事情。
你可以在我的Fate Dice Roller中看到这个问题。单击“滚动”几次,然后将鼠标悬停在直方图上。您在掷骰子时获得了一些简洁的统计数据,但文本部分未对齐。
我只是运气不好,还是垂直对齐真的应该这么乱?我想要一个在更改字体大小时无需调整的解决方案。