如何在此导航栏中的徽标中垂直居中img？

Question

JSFiddle在这里.

正如您在给定的SSCCE中看到的那样,徽标中的图像与其旁边的文本不完全对齐.我需要它<img>并且<span>完美地相邻,因此它们是垂直 - 中间对齐的,而不是共享相同的基线.

我有这个:

我需要这个:

那我该怎么做？

给人vertical-align:middle;以.brand-logo或.brand-logo > img或两者.brand-logo > img并.brand-logo > span没有帮助.

添加类valign-wrapper到a.brand-logo或者div.nav-wrapper还没有帮助.(来源)

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

Answer 1

尝试vertical-align: middle;两者span和.试试image这个

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>