twitter-bootstrap 在标题内垂直对齐 Bootstrap 徽章
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19452111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align Bootstrap badge inside heading
提问by Zim
When I use a Bootstrap badgeinside of heading such as h1,h2,h3the vertical alignment is off. The badgealigns towards the bottom of the heading text. I'd like the badge to align vertically centered with the heading text.
当我badge在诸如h1,之类的标题内使用 Bootstrap 时h2，h3垂直对齐是关闭的。在badge对标题文本的对齐底部。我希望徽章与标题文本垂直居中对齐。
HTML
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
CSS
h1,h2,h3 {
vertical-align:middle;
}
h1>.badge, h2>.badge, h3>.badge {
vertical-align:middle;
}
Result..
结果..
See this Bootply: http://bootply.com/88526
请参阅此 Bootply：http://bootply.com/88526
How can I get this to align on center vertically?
我怎样才能让它垂直居中对齐？
采纳答案by M_Willett
Always hated this problem.
一直讨厌这个问题。
A little hacky but this works:
有点hacky，但这有效：
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
为演示目的定义了标题字体大小
回答by Zim
In Bootstrap 4, the vertical alignment issue is no longer a problem since the badge will inherit the size of the containing heading..
在 Bootstrap 4 中，垂直对齐问题不再是问题，因为徽章将继承包含标题的大小。
<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-middleclass be used to vertically align badges outside of the heading.
但是，align-middle该类用于在标题外垂直对齐徽章。
<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>
