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

因此，我正在尝试构建网站，并试图在导航栏中插入导航栏中的图片，但图片是偏离中心。无法将导航栏品牌图片位置更改为在导航栏中垂直居中

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

.navbar { 
 
\t background-color: #FE0000; 
 
\t position: relative; 
 
\t padding: 20px; 
 
\t border-radius: 0px; 
 
\t border-style: none; 
 

 
} 
 

 
.navbar-brand > img { 
 
\t display: inline-block; 
 
\t position: top; 
 
\t margin: auto; 
 
\t padding-top: 0px; 
 
\t float: left; 
 
}

<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md scrolling-navbar"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <a class="navbar-brand" href="#"><img src="logo.gif"></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse" id="myNavbar"> 
 
\t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t <li class="active"><a href="#">Home</a></li> 
 
\t \t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Services</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Gallery</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </nav>

来源

2017-05-05 Dennis Liu

您在使用Bootstrap 3或4？导航栏看起来像是两者的混合体。 – ZimSystem

@ Md.Sifatul伊斯兰教我批准你的编辑。但请注意，报价降价（“>”）仅适用于报价。它不应该用于强调或点缀。 –

谢谢@ S.L.Barth –

Bydefault bootstrap导航栏来与一些填充/高度，只是填零和需要高度更新您的CSS设置此

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

来源

2017-05-05 08:44:36

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

回答

相关问题