Question

我想添加image/logo inside Nav Bar。如何确保导航栏高度始终适合图像，其他元素保持在中心位置。

我目前正在使用Nav-wrapper框架中materialize类的导航栏。

我尝试将min-height添加到nav-wrapper，但这会让其他元素从中心滑落。

Answer 1

试试这个为我工作

step-01 我添加了这个课程navbar-brand

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

将图像放入导航栏

1 个答案: