将标题内的Bootstrap徽章垂直对齐 [英] Vertically align Bootstrap badge inside heading

问题描述

当我在诸如h1，h2，h3之类的标题内使用Bootstrap badge时，垂直对齐方式关闭. badge对准标题文本的底部.我希望徽章与标题文本垂直居中对齐.

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.

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

See this Bootply: http://bootply.com/88526

我怎样才能使它垂直居中对齐?

How can I get this to align on center vertically?

推荐答案

总是讨厌这个问题.

有点骇人听闻，但这行得通:

A little hacky but this works:

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

这篇关于将标题内的Bootstrap徽章垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！