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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"rel="stylesheet"/><navclass="black"><divclass="nav-wrapper"><aclass="brand-logo center brown-text text-lighten-4"href="#"><imgalt=""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;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"rel="stylesheet"/><navclass="black"><divclass="nav-wrapper"><aclass="brand-logo center brown-text text-lighten-4"href="#"><imgalt=""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>