Bootstrap badge
をh1
、h2
、h3
垂直方向の配置がオフです。 badge
は、見出しテキストの下に揃えます。バッジを見出しテキストと垂直方向の中央に揃えたいです。
[〜#〜] 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
これを垂直方向の中央に揃えるにはどうすればよいですか?
常にこの問題を嫌っていました。
少しハッキーですが、これはうまくいきます:
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;
}
デモ目的で見出しのフォントサイズを定義しました
Bootstrap 4では、バッジは含まれる見出しのサイズを継承するため、垂直方向の配置の問題は問題ではなくなりました。
<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>
しかし align-middle
クラスは、見出しの外側でバッジを垂直に配置するために使用されます。
<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>