html - 基础顶部栏:中心位置标题

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

我意识到，如果我拿出title-area（具有浮动位置：向左），它将使我的“主页”居中，但它将“菜单”推到顶部栏的下方，但它仍然停留在右侧，像这样。

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

谢谢！

    <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;
}

最佳答案

将以下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％的宽度。

关于html - 基础顶部栏:中心位置标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30670727/