Materializecss navbar logo image position

Question

I am having issues with positioning my custom image logo I want it to be perfectly centered in the navbar however it's a bit off in the mobile view and desktop view. Mobile view

The desktop version is also a bit off I tried using vertical-align: middle; but it's not doing its job properly.

Example:

.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 only works on elements with display: table-cell. However, there are a few better ways.

Try using absolute positioning combined with a transform to vertically center:

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