Allineamento verticale del testo CSS

Question

Ho un div, che contiene un'immagine e uno span. Vorrei che il testo nello span fosse allineato al centro dell'immagine. Naturalmente, ho fatto un fiddle per la vostra convenienza.

Ecco il codice HTML:

<div id="legend"> 
    <img src="http://fate.holmes-cj.com/plus.png"/> 
    <span> * 5</span> 
</div> 

Ecco alcune delle cose che ho provato:

• span {vertical-align:middle;} sembra di non fare nulla.
• span {vertical-align:top;} allinea il testo all'inizio dell'immagine. Si potrebbe pensare che se top funzioni, lo stesso sarebbe middle.
• span {vertical-align:20px;} mi dà quello che voglio, ma dipende (e interagisce con) l'altezza div, l'altezza dell'immagine e la dimensione del carattere.
• l'aggiunta di display:table-cell è stata suggerita altrove su SO, ma sembra non fare nulla in Chrome.

È possibile visualizzare il problema nel contesto al mio Fate Dice Roller. Fai clic su "roll" alcune volte, quindi passa il mouse sopra l'istogramma. Ottieni delle statistiche accurate sui tuoi lanci di dadi, ma la porzione di testo è disallineata.

Sono appena sfortunato qui, o l'allineamento verticale dovrebbe essere così disordinato? Mi piacerebbe una soluzione che non deve essere ottimizzata quando cambio la dimensione del carattere.

Answer 1

Qui si va: http://jsfiddle.net/nYbwf/3/

Proprio vertical-align: middle sull'elemento immagine, in questo modo si allinea verticalmente proprio al centro al posto della linea di base.