CODEWITHSUNDEEP
jqueryhtmlcssmaterialize
Shy
Shy

Reputation: 536

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 <img> and adjacent <span> perfectly, so that they are vertically-middle-aligned rather than sharing the same baseline.

I have this:

enter image description here

and I need this:

enter image description here

So how do I do that?

Giving vertical-align:middle; to .brand-logo or .brand-logo > img or both .brand-logo > img and .brand-logo > span did Not help.

Adding class valign-wrapper to a.brand-logo or div.nav-wrapper also did not help. (source)

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

Upvotes: 1

Views: 4309

Answers (2)

XYZ
XYZ

Reputation: 4480

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>

Upvotes: 5

Gerard
Gerard

Reputation: 15786

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>

Upvotes: 2

Related Questions