Vertical center (boot shortcut) along with other elements

Question

I would like to use the bootstrap css inline frame labels:

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

Unfortunately, these labels do not have vertical alignment when used with other elements.

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

Please view the full code for a good example: http://jsfiddle.net/kvPpm/

I know about workarounds for linear growth and absolute / relative positioning, but could not apply them correctly.

How can I vertically center these marks?

Answer 1

Since this <span>is the inlinedefault item , you can simply do:

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

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

<a> <span> . <a> display: inline.

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

Answer 2

.label { vertical-align: top; } 

, , ul