見出しの中にブートストラップ3のバッジを垂直に整列する

Question

h1、h2、h3などの見出しの中にブートストラップbadgeを使用すると、垂直方向の配置がオフになっています。 badgeは、見出しテキストの下部に向かって整列します。私はバッジを見出しのテキストの中心に垂直に揃えたいと思います。

HTML

<h1><span class="badge">badge</span> Heading 1</h1> 
<hr> 
<h2><span class="badge">badge</span> Heading 2</h2> 
<hr> 
<h3><span class="badge">badge</span> Heading 3</h3> 

CSS

h1,h2,h3 { 
    vertical-align:middle; 
} 

h1>.badge, h2>.badge, h3>.badge { 
    vertical-align:middle; 
} 

結果 ..

このBootplyを参照してください：http://bootply.com/88526

これをどのようにセンターに垂直に整列させることができますか？

Answer 1

この問題は常に嫌です。

少しハックが、これは動作します：

h1 { font-size: 2em; } 
h2 { font-size: 1.6em; } 
h3 { font-size: 1.4em; } 
h1,h2,h3 { 
    vertical-align:middle; 
} 

    h1>.badge, h2>.badge, h3>.badge { 
    vertical-align:middle; 
    margin-top: -0.5em; 
} 

定義された見出しのフォントサイズデモの目的のために