所以我正在尝试建立一个网站,我正试图在导航栏中插入一个图片,其中导航栏品牌只是图片偏离中心。
如何将图片垂直放置在中间或让导航栏环绕它?
.navbar {
background-color: #FE0000;
position: relative;
padding: 20px;
border-radius: 0px;
border-style: none;
}
.navbar-brand > img {
display: inline-block;
position: top;
margin: auto;
padding-top: 0px;
float: left;
}
<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md scrolling-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="logo.gif"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分:2)
Bydefault bootstrap
导航栏带有一些填充/高度,只需用零填充更新你的CSS并设置所需的高度
.navbar-brand {
height: 50px;
padding: 0px 15px;
}