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

Question

JSFiddle here.

正如您在给定的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也无济于事。 （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>

Answer 1

vertical-align: middle;和span同时image。试试这个

span,img{
  vertical-align: middle;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox和垂直对齐应该可以解决问题。

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