css - 在标题内垂直对齐 Bootstrap 徽章

Question

当我在标题内使用 Bootstrap 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;
}

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