1. FumiyaMizuguchi

    No comment

    FumiyaMizuguchi
Changes in tags
Changes in body
Source | HTML | Preview
@@ -1,34 +1,37 @@
<img src="http://media02.hongkiat.com/twitter-bootstrap/twitter-bootstrap.jpg" style="border:none;">
Bootstrap使ってますか??エンジニアとってデザインがぐっと楽になるBootstrapは使ってる方も多いと思いますが、Navbarに画像を入れると下に偏った配置になるんだけど、、、
という声がどこからか聞こえてきたので、今回はその解決法を紹介します。
## つかうもの
- [Twitter Bootstrap3](http://getbootstrap.com)
## 問題点
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で
```css
.navbar-brand {
background: url("logo.png") no-repeat left center;
background-size: contain;
height: 50px;
width: 250px;
}
```
これで上手くいくはずです♪
お疲れさまでした^^
+
+### ブログやってます!!
+http://alex23drum.hatenablog.com