title: vertically center span (bootstrap label) together with other elements
body: <p>I'd like to use the inline labels of the bootstrap css framework:</p>
  
  <pre><code>&lt;span class="label"&gt;Default&lt;/span&gt;
  </code></pre>
  
  <p>Unfortunately these labels are not vertically centered when used together with other elements. </p>
  
  <pre><code>&lt;p&gt;
    &lt;span class="label"&gt;&lt;a href="#"&gt;test&lt;/a&gt;&lt;/span&gt;This is a test heading.
  &lt;/p&gt;
  </code></pre>
  
  <p>Please see the full code for a visual example: <a href="http://jsfiddle.net/kvPpm/" rel="noreferrer">http://jsfiddle.net/kvPpm/</a></p>
  
  <p>I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.</p>
  
  <p>How can I vertically center these labels?</p>