문제
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
https://stackoverflow.com/questions/19452111
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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?
해결책
Always hated this problem.
A little hacky but this works:
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;
}
Defined the heading font-sizes for demo purposes
다른 팁
In Bootstrap 4, the vertical alignment issue is no longer a problem since the badge will inherit the size of the containing heading..
<div class="container">
<h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>
However, the align-middle class be used to vertically align badges outside of the heading.
<div class="container">
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>
