html - 基礎 6: 水平方向のナビゲーションを画像で中央揃えにする方法

Question

zurb ファンデーション 6 を使っていますが、とても満足しています。しかし、私はヘッダーに苦労しています。私の目標は、次のようなメイン ナビゲーションを実装することです: 分割線として画像 (ロゴ) を使用して、水平ナビゲーション内のメニュー項目を中央に配置するにはどうすればよいですか?

私の試みは、ナビゲーション項目にulリストを使用することです:

<nav class="row header show-for-large">
  <div class="large-5 column">
    <ul class="main-nav-left">
      <li>Women</li>
      <li>Men</li>
      <li>Store</li>
      <li>Blog</li>
    </ul>
  </div>
  <div class="large-2 column ">
    <%= image_tag("test-Logo.png", alt: "Nile Logo") %>
  </div>
  <div class="large-5 column">
    <ul class="main-nav-right">
      <li>EN & FR</li>
      <li>Login</li>
      <li>Wunschliste</li>
      <li>Warenkorb</li>
    </ul>
  </div>
</nav>