Vertikal ausrichten Bootstrap-badge innen überschrift

Wenn ich mit einem Bootstrap - badge im inneren der Position wie h1,h2,h3 ist die vertikale Ausrichtung aus. Die badge richtet nach unten von dem text der überschrift. Ich würde gerne das Abzeichen ausrichten vertikal zentriert mit dem text der überschrift.

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 diese Bootply: http://bootply.com/88526

Vertikal ausrichten Bootstrap-badge innen überschrift

Wie kann ich diese ausrichten auf vertikal zentrieren?

InformationsquelleAutor Zim | 2013-10-18

Schreibe einen Kommentar