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画像要素に、そのように、それは右の代わりに、ベースラインの真ん中に縦方向に整列します。