Materializecss 导航栏徽标图像位置

Question

我在定位我的自定义图像徽标时遇到问题我希望它完全位于导航栏的中心，但它在移动视图和桌面视图中有点偏离。 Mobile view

我尝试使用 vertical-align: middle; 桌面版也有点不对劲，但它没有正常工作。

示例：

.logo {
    display: inline-block;
    height: 100%;
}

.logo>img {
    vertical-align: middle;
  position: relative; 
    top:1px; 
}

  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    
   <div class="navbar-fixed">
  <nav class="blue darken-1">
   <div class="container">
    <div class="nav-wrapper">
     <a href="#Main" class="logo">
          <img src="https://i.imgur.com/sFliVuL.png" >
        </a> <a class="sidenav-trigger" data-target="mobile-demo" href="#"><i class="material-icons">menu</i></a>
     <ul class="right hide-on-med-and-down">
      <li>
       <a class="waves-effect" href="#home">Home</a>
      </li>
      <li>
       <a class="waves-effect" href="#info">Info</a>
      </li>
      <li>
       <a class="waves-effect" href="#portfolio">Portfolio</a>
      </li>
      <li>
       <a class="waves-effect" href="#links">Social</a>
      </li>
     </ul>
    </div>
   </div>
  </nav>
 </div>
 <ul class="sidenav" id="mobile-demo">
  <li class="user-view">
   <div class="background"><img alt="tokyo" src="img/navmenu.jpg"></div>
   <div class="wow zoomIn"><img alt="me" class="circle" src="img/me.jpg"></div><a href="#"><span class="white-text name">Edgar</span></a> <a href="mailto:edgar@teamhusky.net"><span class="white-text email">edgar@teamhusky.net</span></a>
  </li>

Answer 1

vertical-align: middle 仅适用于具有 display: table-cell 的元素。但是，还有一些更好的方法。

尝试结合使用绝对定位和垂直居中转换：

.logo {
    display: inline-block;
    height: 100%;
}

.logo>img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    
   <div class="navbar-fixed">
  <nav class="blue darken-1">
   <div class="container">
    <div class="nav-wrapper">
     <a href="#Main" class="logo">
          <img src="https://i.imgur.com/sFliVuL.png" >
        </a> <a class="sidenav-trigger" data-target="mobile-demo" href="#"><i class="material-icons">menu</i></a>
     <ul class="right hide-on-med-and-down">
      <li>
       <a class="waves-effect" href="#home">Home</a>
      </li>
      <li>
       <a class="waves-effect" href="#info">Info</a>
      </li>
      <li>
       <a class="waves-effect" href="#portfolio">Portfolio</a>
      </li>
      <li>
       <a class="waves-effect" href="#links">Social</a>
      </li>
     </ul>
    </div>
   </div>
  </nav>
 </div>
 <ul class="sidenav" id="mobile-demo">
  <li class="user-view">
   <div class="background"><img alt="tokyo" src="img/navmenu.jpg"></div>
   <div class="wow zoomIn"><img alt="me" class="circle" src="img/me.jpg"></div><a href="#"><span class="white-text name">Edgar</span></a> <a href="mailto:edgar@teamhusky.net"><span class="white-text email">edgar@teamhusky.net</span></a>
  </li>

Materializecss 导航栏徽标图像位置

Materializecss navbar logo image position

html

css

materialize