垂直對齊Bootstrap 3徽標內部標題

Question

當我在標題內部使用引導badge時，如h1,h2,h3垂直對齊關閉。 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; 
} 

定義標題字體大小進行演示