html - 基础顶部栏 : Position Title in Center

Question

我正在使用 Foundation's top-bar我想将标题“主页”放在顶部栏的中央，同时将“菜单”保留在右侧的末尾。但是，我从我的代码中得到的是我的“主页”仍然位于左侧，而我的“菜单”位于右侧。

我意识到，如果我取出 title-area(有 float: left)，那么它会将我的“主页”居中，但它会将我的“菜单”推到顶部栏下方，但它仍然留在右侧看起来像这样 .

有谁知道如何将标题放在中间，同时将菜单保持在顶部栏的右侧？

谢谢!

    <nav class="top-bar" data-topbar role="navigation">
     <ul class="title-area">
       <li class="name">
            <h1 id="top_bar_page_title">Home</h1>
       </li>
       <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
     </ul>
     <section class="top-bar-section">
     <!-- Right Nav Section -->
     <ul class="right">
       <li class="has-dropdown">
           <a href="#">Menu</a>
            <ul class="dropdown">
             <li><a href="#">First link in dropdown</a></li>
             <li class="active"><a href="#">Active link in dropdown</a></li>
           </ul>
         </li>
       </ul>
      </section>
    </nav>

#top_bar_page_title{
  color: $white;
    text-align: center;
}

Answer 1

将以下 CSS 规则添加到现有代码中。设置宽度和边距:0 自动将帮助菜单找到中心。

@media (min-width: 640px) {
  .top-bar .title-area {
    float: left;
    margin: 0 auto;
    width: calc(100% - 90px);
    position: unset;
  }
}

Codeply Demo

如果您不需要 calc()，请使用 85% 的宽度。