在标题内垂直对齐Bootstrap徽章

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.

当我在标题内使用Bootstrap徽章（如h1，h2，h3）时，垂直对齐关闭。徽章对齐标题文本的底部。我希望徽章垂直对齐标题文本。

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?

如何让它在垂直中心对齐？

2 个解决方案

#1

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

为演示目的定义标题字体大小

#2

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-middle class 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>

Demo: https://www.codeply.com/go/rE0z3665zh

演示：https：//www.codeply.com/go/rE0z3665zh