無法將導航欄品牌圖片位置更改爲在導航欄中垂直居中

因此，我正在嘗試構建網站，並試圖在導航欄中插入導航欄中的圖片，但圖片是偏離中心。無法將導航欄品牌圖片位置更改爲在導航欄中垂直居中

如何讓圖片垂直放置在中間或用導航條環繞它？

.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

無法將導航欄品牌圖片位置更改爲在導航欄中垂直居中

回答

相關問題