BootstrapでNavbarにロゴ画像をいれるとズレる問題の解決法

Bootstrap使ってますか？？エンジニアとってデザインがぐっと楽になるBootstrapは使ってる方も多いと思いますが、Navbarに画像を入れると下に偏った配置になるんだけど、、、
という声がどこからか聞こえてきたので、今回はその解決法を紹介します。

つかうもの

• Twitter Bootstrap3

問題点

Bootstrapのnavbarのheaderに
<a class="navbar-brand" href="#">Brand</a>
こんな記述がされていると思うのですが、ここにロゴ画像を埋め込めばいいじゃん！
ということで
<a class="navbar-brand" href="#"><img src="logo.png"></a>
と記述しても上手くいきません。画像が下寄りに配置され、navbarからはみ出したりしてしまいます。

解決法

画像を放り込まないで、aタグの背景にせっていしてあげると上手くいきます！
<a class="navbar-brand" href="#"></a>
そして、cssで

.navbar-brand {
  background: url("logo.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 250px;
}

これで上手くいくはずです♪
お疲れさまでした^^

ブログやってます！！