如何在 Foundation 中垂直对齐徽标和菜单？

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。

我想要做的是将右侧菜单与徽标中间垂直对齐。我可以在右上角上方应用边距 class.. 但是在 Foundation 6 中有更聪明的方法吗？

在这里使用 Equalizer 这样的东西有意义吗？

谢谢。

Answer 1

这是一个有效的 demo.

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

.top-bar {
    position: relative;
}

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

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

如何在 Foundation 中垂直对齐徽标和菜单？

How to vertically align logo and menu in Foundation?

css

zurb-foundation