¿Cómo alinearse verticalmente con x-height?

Tengo una línea de texto y una imagen pequeña, que estoy tratando de alinear verticalmente dentro de la línea. Mi objective es alinear el centro vertical de la imagen con la altura x (o la mitad de la altura de una letra mayúscula) desde la línea base del texto. No puedo encontrar ninguna forma de hacer esto. Lo más cercano que sé es:

vertical-align: middle; 

Este comportamiento tal como se establece en la especificación CSS 2.1:

Alinee el punto medio vertical de la caja con la línea base del cuadro principal más la mitad de la altura x del padre

Si hubiera una manera de eliminar el mundo “mitad” de esa definición, tendría lo que quiero. ¿Cómo logro esto?

El problema es que el texto se encuentra en la línea de base del texto mientras la imagen desciende por debajo. Y diferentes navegadores manejan eso de manera diferente.

Mi solución favorita es mostrar la imagen como imagen de background-image , con su background-position en left center … puede sazonar al gusto.

No sé si es la “mejor” respuesta, pero siempre configuré el “alto de línea” de mi texto para que coincida con la altura de lo que estoy tratando de centrar.

Aquí está el centro de alineación vertical.

http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/

o use la imagen como imagen de fondo

fondo: url (bg_image.jpg) no-repeat centro izquierdo;