verticalmente centro campata (etichetta bootstrap) insieme ad altri elementi

Question

Vorrei utilizzare le etichette in linea del quadro bootstrap css:

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

Sfortunatamente queste etichette non è centrata 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

Since <span> is an inline element by default you can just do:

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

And it should work. http://jsfiddle.net/kvPpm/1/

But then <a> inside <span> is not semantically correct. You can just use <a> and style it display: inline.

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

Answer 2

.label { vertical-align: top; } 

This worked for me when I wanted it to be aligned properly in a ul