ナビバーでロゴが垂直中央に揃わない

Question

bootstrap 4を適用しています。
instagramのロゴ（公式バーナー）をナビバーに入れているのですが、写真の様にその他ナビバー記載の文字と垂直水平になりません。。うまくいくやり方をご教示頂けますと助かります。
instagramの公式バナーを使用しているため、style属性を使用してhtmlに直接cssをう埋め込んでいます。

<header>
 <nav class="navbar navbar-static-top navbar-light bg-faded">
  <a class="navbar-brand" href="/">TOP</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="/profile">プロフィール</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/course">コース紹介</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/lesson">講義予定・実績</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">お問い合わせ</a>
    </li>
    <li class="nav-item">
    <style>
    .ig-b- { display: inline-block; }
    .ig-b- {height: 4; line-height: 4; vertical-align: middle;}
    .ig-b- img { visibility: hidden; }
    .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
    .ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2 / 1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
    {.ig-b-24 { background-image: url(//badges.instagram.com/static/images/[e-mail]); background-size: 60px 178px; } }
    </style>
    <a href="https://www.instagram.com/faceyogamisaki/?ref=badge" class="ig-b- ig-b-24">
      <img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" />
    </a>
  </li>
  </ul>
</nav>
</header>

Comments

[kei344]

HTMLとして提示されている中にHTMLの文法上エラーになるような文字列が混じっています。それが出力されているのだとしたらまずそこを修正してください。（HTMLに`<%= %>`というタグはないし、有ったとして終了タグが無いためブラウザによってエラーになる可能性が高いです）

[innjera]

htmlの記載を修正しました。（rubyのコードが記載されていました、、申し訳ありません）

Answer 1

他にも方法はありますが、とりあえず下記のように追記することで出来ると思います。

<li class="nav-item aaa">
    <a href="https://www.instagram.com/faceyogamisaki/?ref=badge" class="ig-b- ig-b-24">
        <img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" />
    </a>
</li>

.nav-item.aaa {
    position: relative;
}
.nav-item.aaa::before {
    content: "_";
    text-indent: -100vw;
}
.nav-item.aaa > a {
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
}
```**動くサンプル：**[https://jsfiddle.net/kfs5pbse/](https://jsfiddle.net/kfs5pbse/)