web-dev-qa-db-ja.com

垂直方向に整列Bootstrap見出し内のバッジ

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

enter image description here

これを垂直方向の中央に揃えるにはどうすればよいですか？

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

常にこの問題を嫌っていました。

少しハッキーですが、これはうまくいきます：

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

デモ目的で見出しのフォントサイズを定義しました

22
M_Willett

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>

デモ： https://www.codeply.com/go/rE0z3665zh

2
Zim