在标题内垂直对齐 Bootstrap 徽章

本文介绍了在标题内垂直对齐 Bootstrap 徽章的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我在标题中使用 Bootstrap badge 时，例如 h1,h2,h3 垂直对齐已关闭.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?

推荐答案

一直讨厌这个问题.

有点笨拙，但这有效:

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 徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！