导航栏 - 物化 CSS - 徽标对齐答案

【问题标题】：Navbar - Materialize CSS - Logo Alignment导航栏 - 物化 CSS - 徽标对齐
【发布时间】：2017-04-03 12:19:50
【问题描述】：

我正在使用具体化 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 的助手，但仍然没有成功。

有什么想法吗？

【问题讨论】：

第一个问题很好。图片尺寸是多少？
@ZimSystem - 我当前使用的标志尺寸是 155px X 46px

标签： css nav materialize

【解决方案1】：

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

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

.logo>img {
    vertical-align: middle
}

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

【讨论】：