无法将导航栏品牌图像位置更改为在导航栏中垂直居中

时间:2017-05-05 08:40:55

标签: html css twitter-bootstrap navbar

所以我正在尝试建立一个网站,我正试图在导航栏中插入一个图片,其中导航栏品牌只是图片偏离中心。

如何将图片垂直放置在中间或让导航栏环绕它?

navbar

.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>

1 个答案:

答案 0 :(得分:2)

Bydefault bootstrap导航栏带有一些填充/高度,只需用零填充更新你的CSS并设置所需的高度

.navbar-brand {
  height: 50px;
  padding: 0px 15px;
}