导航栏 - Materialise CSS - 徽标对齐

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 不提供助手 class，因此只需添加您自己的助手：

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

.logo>img {
    vertical-align: middle
}

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

导航栏 - Materialise CSS - 徽标对齐

Navbar - Materialize CSS - Logo Alignment

css

nav

materialize