5

我有一个 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中看到这个问题。单击“滚动”几次,然后将鼠标悬停在直方图上。您在掷骰子时获得了一些简洁的统计数据,但文本部分未对齐。

我只是运气不好,还是垂直对齐真的应该这么乱?我想要一个在更改字体大小时无需调整的解决方案。

4

1 回答 1

9

给你:http: //jsfiddle.net/nYbwf/3/

vertical-align: middle在图像元素上,这样它就会在中间垂直对齐而不是基线。

于 2012-11-23T21:14:51.427 回答