lapso verticalmente centro (etiqueta bootstrap) junto con otros elementos

Question

me gustaría utilizar las etiquetas en línea del marco bootstrap css:

<span class="label">Default</span> 

Desafortunadamente estas etiquetas no están centradas verticalmente cuando se usa junto con otros elementos.

<p> 
    <span class="label"><a href="#">test</a></span>This is a test heading. 
</p> 

Por favor ver el código completo para un ejemplo visual: http://jsfiddle.net/kvPpm/

Soy consciente de la línea de altura y soluciones de posicionamiento relativo/absoluto, pero no era capaz de aplicarlos correctamente.

¿Cómo puedo centrar verticalmente estas etiquetas?

Answer 1

Desde <span> es un elemento inline por defecto sólo se puede hacer:

span { vertical-align: middle|top|bottom; } 

y debería funcionar. http://jsfiddle.net/kvPpm/1/

Pero luego <a> dentro de <span> no es semánticamente correcto. Simplemente puede usar <a> y darle el estilo display: inline.

http://jsfiddle.net/kvPpm/3/

Answer 2

.label { vertical-align: top; } 

Esto funcionó para mí cuando yo quería que estar alineada correctamente en un ul