campata verticalmente centro (etichetta bootstrap) insieme ad altri elementi

Question

Vorrei utilizzare le etichette in linea del quadro bootstrap css:

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

Purtroppo queste etichette non sono centrate verticalmente quando utilizzato insieme ad altri elementi.

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

Si prega di vedere il codice completo per un esempio visivo: http://jsfiddle.net/kvPpm/

Sono consapevole del line-height e/relative soluzioni di posizionamento assoluto, ma non ero in grado di applicare correttamente.

Come posso centrare verticalmente queste etichette?

Answer 1

Dal <span> è un elemento inline di default si può semplicemente fare:

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

e dovrebbe funzionare. http://jsfiddle.net/kvPpm/1/

Ma poi <a> all'interno <span> non è semanticamente corretto. Puoi semplicemente usare <a> e modificarlo display: inline.

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

Answer 2

.label { vertical-align: top; } 

questo ha lavorato per me quando ho voluto che essere allineato correttamente in un ul