我在定位自定义图像徽标时遇到问题，我希望它在导航栏中完美居中，但在移动视图和桌面视图中有点偏离。手机查看
我尝试使用的桌面版本也有点偏离，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> …