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

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