Vertically Bootstrap 3 Abzeichen innen in Richtung

Question

auszurichten, wenn ich einen Bootstrap badge Inneren der Position wie h1 verwenden, h2, h3 Die vertikale Ausrichtung ist ausgeschaltet. Die badge wird am unteren Rand des Überschriftentextes ausgerichtet. Ich möchte, dass das Logo vertikal mit dem Überschriftentext ausgerichtet wird.

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; 
} 

Ergebnis ..

Sehen Sie diese Bootply: http://bootply.com/88526

Wie kann ich das auf die Mitte vertikal ausrichten?

Answer 1

Hasste immer dieses Problem.

Ein wenig hacky, aber dies funktioniert:

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; 
} 

Definiert die Überschrift Schriftgrößen für Demozwecke