Vertikal ausrichten Bootstrap-badge innen überschrift
Wenn ich mit einem Bootstrap - badge
im inneren der Position wie h1
,h2
,h3
ist die vertikale Ausrichtung aus. Die badge
richtet nach unten von dem text der überschrift. Ich würde gerne das Abzeichen ausrichten vertikal zentriert mit dem text der überschrift.
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;
}
Ergebnis..
Sehen diese Bootply: http://bootply.com/88526
Wie kann ich diese ausrichten auf vertikal zentrieren?
InformationsquelleAutor Zim | 2013-10-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Immer gehasst dieses problem.
Etwas hacky, aber das funktioniert:
Definiert die überschrift,, font-Größen für demo-Zwecke
h3>.badge { vertical-align: middle }
Ich brauchte nicht den margin-top (in der Tat, die Einstellung margin-top versaut die Ausrichtung).
Ich wusste nicht, dass das vertical-align auf h1, h2, h3, entweder - nur die Abzeichen - Stimme mit Brent ' s Kommentar.
Ich brauchte das margin-top zu. Dank fellas.
InformationsquelleAutor M_Willett
In der Bootstrap-4, die vertikale Ausrichtung Problem ist kein problem mehr, da die Abzeichen Erben die Größe der Sie enthaltenden überschrift..
Jedoch die
align-middle
Klasse verwendet werden, um vertikal ausrichten Abzeichen außerhalb der überschrift.Demo: https://www.codeply.com/go/rE0z3665zh
InformationsquelleAutor Zim