画像をNav Barに置く

Question

image/logo inside Nav Barを追加します。 ナビゲーションバーの高さが常に画像にフィットし、他の要素が中央に収まるようにする方法。

materializeフレームワークのNav-wrapperクラスのナビゲーションバーを現在使用しています。

nav-wrapperに最小高さを追加しようとしましたが、他の要素が中央から滑り落ちます。

Code pen link

Answer 1

このようにしてみて私のために働い

ステップ-01 Imがnavbar-brand

ステップ-02 Imはこの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