LoginSignup
88

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-06-16

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

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

ブログやってます!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
88