VERTICAL CENTRO SPAN (etiqueta de bootstrap) junto con otros elementos

Question

Me gustaría usar las etiquetas en línea del marco Bootstrap CSS:

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

Desafortunadamente, estas etiquetas no se centran verticalmente cuando se usan junto con otros elementos.

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

Consulte el código completo para un ejemplo visual: http://jsfiddle.net/kvppm/

Soy consciente de la altura de la altura de línea y el posicionamiento absoluto/relativo, pero no pude aplicarlas correctamente.

¿Cómo puedo centrar verticalmente estas etiquetas?

Answer 1

Ya que <span> es un inline Elemento de forma predeterminada puede hacer:

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

Y debería funcionar. http://jsfiddle.net/kvppm/1/

Pero entonces <a> en el interior <span> no es semánticamente correcto. Puedes simplemente usar <a> y estilo display: inline.

http://jsfiddle.net/kvppm/3/

Answer 2

.label { vertical-align: top; } 

Esto funcionó para mí cuando quería que se alineara correctamente en un UL.