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

问题描述

当我在 h1 ， h2 标题中使用Bootstrap / code>， h3 垂直对齐关闭。 徽章朝向标题文本的底部。

$ b

 < h1>< span class =badge> badge< / span>标题1< / h1> 
< hr> 
< h2>< span class =badge>徽章< / span>标题2< / h2> 
< hr> 
< h3>< span class =badge>徽章< / span>标题3< / h3> 
  

CSS

  h1，h2，h3 {
 vertical-align：middle; 
} 
 
 h1> .badge，h2> .badge，h3> .badge {
 vertical-align：middle; 
} 
  

结果
$ b

查看此Bootply： http://bootply.com/88526 p>

>

$ b $

解决方案

总是讨厌这个问题。 / p>

有点怪，但是工作原理：

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

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

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

Result..

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

How can I get this to align on center vertically?

解决方案

Always hated this problem.

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