web-dev-qa-db-fra.com

Alignez verticalement Bootstrap badge à l'intérieur du titre

Lorsque j'utilise un Bootstrap badge à l'intérieur d'un titre tel que h1, h2, h3 l'alignement vertical est désactivé. badge s'aligne vers le bas du texte de l'en-tête. Je voudrais que le badge s'aligne verticalement centré avec le texte du titre.

[~ # ~] 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;
}

Résultat ..

Voir ce Bootply: http://bootply.com/88526

enter image description here

Comment puis-je faire en sorte que cela s'aligne au centre verticalement?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
25
Zim

J'ai toujours détesté ce problème.

Un peu hacky mais ça marche:

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

Définition de la taille des polices de titre à des fins de démonstration

22
M_Willett

Dans Bootstrap 4, le problème d'alignement vertical n'est plus un problème car le badge héritera de la taille de l'en-tête contenant ..

<div class="container">
  <h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
  <hr>
  <h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
  <hr>
  <h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>

Cependant, le align-middle classe être utilisé pour aligner verticalement les badges en dehors de l'en-tête.

<div class="container">
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>

Démo: https://www.codeply.com/go/rE0z3665zh

2
Zim