Вертикально выровнять значок Bootstrap 3 внутри заголовка

Когда я использую 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

enter image description here

Как это сделать, чтобы выравнивать по центру по вертикали?

Ответы

Ответ 1

Всегда ненавидел эту проблему.

Немного взломанный, но это работает:

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

Определено размер шрифта заголовка для демонстрационных целей