How To Vertically Center An Img In The Logo In This Navigation-bar?

JSFiddle here. As you can see in the given SSCCE, the image in the logo does NOT align well with the text next to it. I need that and adjacent perfectly, s

Solution 1:

Try vertical-align: middle; to both span and the image .Try this

span,img{
  vertical-align: middle;
}

.brand-logo > span,.brand-logo > img{
   vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>


<nav class="black">
	<div class="nav-wrapper">

		<a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" />
			<span>BRAND</span>
		</a>

	</div>
</nav>

Solution 2:

Using flexbox and vertical alignment should do the trick.

.brand-logo.center.brown-text.text-lighten-4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>
<nav class="black">
  <div class="nav-wrapper">

    <a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" />
      <span>BRAND</span>
    </a>

  </div>
</nav>