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>

但是图像没有垂直对齐。我确实尝试过使用物化CSS的助手，但仍然没有成功。

任何想法有什么不对？

Answer 1

在这种情况下，Materialise不提供辅助类，所以只需添加自己的：

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

.logo>img {
    vertical-align: middle
}

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

Navbar - 实现CSS - 徽标对齐

1 个答案: