Вертикально выровнять значок 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

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

Ответ 1