Alineación de texto vertical de CSS

Tengo un div, que contiene una imagen y un lapso. Me gustaría que el texto del tramo esté alineado en el medio con la imagen. Naturalmente, hice un violín para su conveniencia.

Aquí está el HTML:

* 5

Estas son algunas de las cosas que he intentado:

  • span {vertical-align:middle;} parece que no hace nada.
  • span {vertical-align:top;} alinea el texto en la parte superior de la imagen. Uno pensaría que si top funciona, también lo haría el middle .
  • span {vertical-align:20px;} me da lo que quiero, pero depende de (e interactúa con) la altura del div, la altura de la imagen y el tamaño de la fuente.
  • agregando display:table-cell ha sido sugerido en otro lugar en SO, pero parece que no hace nada en Chrome.

Puedes ver el problema en contexto en mi Fate Dice Roller . Haga clic en “rodar” varias veces y luego pase el mouse sobre el histogtwig. Obtienes algunas estadísticas claras en tus tiradas de dados, pero la porción de texto está desalineada.

¿Acaso no tengo suerte aquí, o se supone que la alineación vertical es tan desordenada? Me encantaría una solución que no tenga que modificarse cuando cambie el tamaño de la fuente.

Aquí tienes: http://jsfiddle.net/nYbwf/3/

Simplemente vertical-align: middle en el vertical-align: middle en el elemento de la imagen, de esa manera se alineará verticalmente en el medio en lugar de la línea de base.