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已在其他地方建議使用display:table-cell ，但在Chrome中似乎無能為力。

你可以在我的Fate Dice Roller上看到問題。 單擊“滾動”幾次，然后將鼠標懸停在直方圖上。 你的骰子卷上有一些簡潔的統計數據，但文字部分未對齊。

我只是運氣不好，還是垂直對齊真的應該是這個混亂？ 我想要一個不需要在我改變字體大小時進行調整的解決方案。

Answer 1

你去： http ： //jsfiddle.net/nYbwf/3/

只是vertical-align: middle在圖像元素的vertical-align: middle ，這樣它將在中間垂直對齊而不是基線。