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

More than 1 year has passed since last update.

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

つかうもの

問題点

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

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

ブログやってます!!

http://alex23drum.hatenablog.com

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.