css - 如何在 Foundation 中垂直对齐 Logo 和菜单？

Question

我有一个使用 Foundation 的简单顶部栏，它是这样编码的..

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="default.html"><img src="http://dev.golightlyplus.com/wig/website/images/wig-logo.png" alt="Home"></a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Team</a></li>
    </ul>
  </div>
</div>

它的代码笔是here .

我想要做的是将右侧菜单与 Logo 的中间垂直对齐。我可以在 top-bar-right 类上方应用边距..但是在 Foundation 6 中有更聪明的方法来做到这一点吗？

会使用类似 Equalizer 的东西吗？这里有意义吗？

谢谢。

Answer 1

这是一个有效的 demo.

首先，将top-bar的position设置为relative。

.top-bar {
    position: relative;
}

然后，将top-bar-right中.menu的位置设置为absolute并使用transform:

.top-bar-right .menu {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
}