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

【问题标题】：Can't change navbar-brand image position to be in vertically centered in navbar无法将导航栏品牌图像位置更改为在导航栏中垂直居中
【发布时间】：2017-05-05 17:13:49
【问题描述】：

所以我正在尝试建立一个网站，并尝试在导航栏品牌所在的导航栏中插入一张图片，但图片偏离中心。

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

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

【问题讨论】：

您使用的是 Bootstrap 3 还是 4？导航栏看起来像是两者的混合。
@Md.Sifatul Islam 我批准了您的编辑。但是，请注意引号降价 (">") 仅用于引号。它不应该用于强调或修饰。

标签： html css twitter-bootstrap navbar

【解决方案1】：

默认情况下bootstrap navbar 带有一些填充/高度，只需使用零填充和所需高度更新您的 CSS 即可设置此

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

【讨论】：