How to vertically align logo and menu in Foundation?
<p>I have a simple top-bar using Foundation that is coded up like this..</p>

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

<p>The codepen for it is <a href="http://codepen.io/magician11/pen/mVBvaY" rel="nofollow">here</a>.</p>

<p>What I'm wanting to do is vertically align the right menu with the middle of the logo. I can apply a margin above the top-bar-right class.. but is there a smarter way to do this in Foundation 6?</p>

<p>Would using something like <a href="http://foundation.zurb.com/sites/docs/equalizer.html" rel="nofollow">Equalizer</a> make sense here?</p>

<p>Thanks.</p>