css - Zurb Foundation のトップ バー ナビゲーションを中央に配置するにはどうすればよいですか?

Question

私のサイトのトップバーのナビゲーションは、次のように左揃えになっています。

| Home | aveoTSD | Silent Nite          |

次のようにトップバーのナビゲーションを中央に配置したいと思います。

|          Home | aveoTSD | Silent Nite          |

「例」テキストの赤いバーとまったく同じように中央に配置します。

これが私の cssです。

Answer 1

これが役立つことがわかりました： https://github.com/zurb/foundation/issues/1598

ナビゲーションのコンテナを次のように設定します: text-align:center;

次に、ナビゲーション自体のために、ディスプレイを次のように設定します 。

それが役立つことを願っています!

Answer 2

上記の例を使用して、いくつかの微調整を行います。上記はすべてを中心にしています。以下の調整により、トップバーが中央に配置され、ドロップダウンのテキストが左揃えになり、モバイルでは「ハンバーガー」/メニュー アイコンが中央に配置されます。

/* center topbar */
/* set alignment to center for small screens */
nav.top-bar { text-align:center; }
nav.top-bar:not(.expanded) {
        text-align: center;
        section.top-bar-section { 
            /* align drop down menu text to left on large screens */
            text-align:left; 
            display: inline-block;

         }


}
/* center the mobile hamburger menu */
.top-bar .toggle-topbar.menu-icon {
 padding: 0;
 right: 50%;
 margin-right: -36px;
}