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からはみ出したりしてしまいます。
![BootstrapでNavbarにロゴ画像をいれるとズレる問題の解決法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/16234cc7358c7f1c61f575e9faab3c2f8a11fcc1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Qm9vdHN0cmFwJUUzJTgxJUE3TmF2YmFyJUUzJTgxJUFCJUUzJTgzJUFEJUUzJTgyJUI0JUU3JTk0JUJCJUU1JTgzJThGJUUzJTgyJTkyJUUzJTgxJTg0JUUzJTgyJThDJUUzJTgyJThCJUUzJTgxJUE4JUUzJTgyJUJBJUUzJTgzJUFDJUUzJTgyJThCJUU1JTk1JThGJUU5JUExJThDJUUzJTgxJUFFJUU4JUE3JUEzJUU2JUIxJUJBJUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NWY5NjM1OTRjZGZhN2RhZmNhMjM2YTNjMjg0N2Y4YQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwRnVtaXlhTWl6dWd1Y2hpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jMzEyYzk0ODU3NWQ5MWZhMmZjYTEwOGRlMjUxMjZjMw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D30d0fbc7d609eca2e45e6a3567f934a5)