title: Vertically align Bootstrap badge inside heading
body: <p>When I use a Bootstrap <code>badge</code> inside of heading such as <code>h1</code>,<code>h2</code>,<code>h3</code> the vertical alignment is off. The <code>badge</code> aligns towards the bottom of the heading text. I'd like the badge to align vertically centered with the heading text.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;&lt;span class="badge"&gt;badge&lt;/span&gt; Heading 1&lt;/h1&gt;
  &lt;hr&gt;
  &lt;h2&gt;&lt;span class="badge"&gt;badge&lt;/span&gt; Heading 2&lt;/h2&gt;
  &lt;hr&gt;
  &lt;h3&gt;&lt;span class="badge"&gt;badge&lt;/span&gt; Heading 3&lt;/h3&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>h1,h2,h3 {
    vertical-align:middle;
  }
  
  h1&gt;.badge, h2&gt;.badge, h3&gt;.badge {
    vertical-align:middle;
  }
  </code></pre>
  
  <p><strong>Result</strong>..</p>
  
  <p>See this Bootply: <a href="http://bootply.com/88526" rel="noreferrer">http://bootply.com/88526</a></p>
  
  <p><img src="https://i.stack.imgur.com/pVpEF.png" alt="enter image description here"></p>
  
  <p>How can I get this to align on center vertically?</p>