css - 导航栏 - Materialise CSS - Logo 对齐

Question

我正在使用 materialize CSS 库并按以下方式创建导航栏:

<div class="navbar-fixed">     
<nav>
          <div class="container">
        <div class="nav-wrapper">
          <a href="#Main" class="brand-logo"><p><img src="public/images/logo.png" /></p></a>
          <a href="#" data-activates="mobile-demo" class="button-collapse button right"><span class="btn-open"></span></a>
          <ul class="right hide-on-med-and-down">
            <li><a href="#link1">Link1</a></li>
            <li><a href="#Link2">Link2</a></li>
            <li><a href="#Link3">Link3</a></li>
            <li><a href="#Link4">Link4</a></li>
          </ul>
        </div>
          </div>
      </nav>
</div>

但是图像没有垂直对齐。我确实尝试使用 materialize CSS 的帮助程序，但仍然没有成功。

知道哪里出了问题吗？

Answer 1

在这种情况下，Materialize 不提供辅助类，因此只需添加您自己的辅助类:

.logo {
    display: inline-block;
    height: 100%;
}

.logo>img {
    vertical-align: middle
}

演示:http://www.codeply.com/go/466ZvBYbG2