在标题内垂直对齐Bootstrap徽章

Question

当我使用一个自举badge标题,如内部h1,h2,h3垂直取向是关闭的.在badge对标题文本的对齐底部.我希望徽章垂直对齐标题文本.

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;
}

结果 ..

请参阅此Bootply:http://bootply.com/88526

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

Answer 1

总是讨厌这个问题.

有点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;
}

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

Answer 2

在 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>

但是，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>

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