將圖像放在導航欄中

Question

我想添加image/logo inside Nav Bar。 如何確保導航欄高度始終適合圖像，其他元素保持居中。

我目前使用的導航欄Nav-wrapper類從materialize框架。

我試圖將最小高度添加到nav-wrapper，但這會使其他元素從中心滑落。

Code pen link

Answer 1

嘗試這樣的工作對我來說

一步-01林添加此類navbar-brand

一步-02林加入這個CSS

.navbar-brand { 

    padding: 0px; 
} 
.navbar-brand>img { 
    height: 64px; 
    padding: 0px; 
    width: auto; 
} 



.black { 
    background-color: #111 !important; 
} 

nav

<nav> 
     <div class="nav-wrapper black"> 
     <div class="container"> 
      <a href="#" class="navbar-brand"><img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg"></a> 
      <ul id="Nav2" class="right hide-on-med-and-down"> 
      <li><a href="#"><i class="material-icons">search</i></a></li> 
      <li><a href="#"><i class="material-icons right">refresh</i>Link with Left Icon</a></li> 
      <li><a class="waves-effect waves-light btn">Button</a></li> 
      </ul> 
     </div> 
     </div> 
     </nav> 

Codepen