When I use a Bootstrap badge
inside of heading such as h1
,h2
,h3
the vertical alignment is off. The badge
aligns towards the bottom of the heading text. I'd like the badge to align vertically centered with the heading text.
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;
}
Result..
See this Bootply: http://bootply.com/88526
How can I get this to align on center vertically?
See Question&Answers more detail:os