导航栏 - 物化CSS - 标志对准

Question

我使用Materialise的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