围绕中心徽标图像进行居中导航

Question

我有一个导航栏，如下所示：http://i.imgur.com/4rxkS2K.jpg

我是用foundation做网站，我做的导航条是这样的：

HTML:

<nav class="top-bar">
    <ul>

          <li><a href="about.html">About</a></li>
          <li id="menu-divider">|</li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="index.html"><img src="images/logo.png" alt=""></a></li>
          <li><a href="services.html">Services</a></li>
          <li id="menu-divider">|</li>
          <li><a href="contact.html">Contact</a></li>
    </ul>


</nav>

CSS:

.top-bar { font-family: 'bebas_neueregular'; 
           height: 150px;
           line-height: 100px;
           padding: 18px;
           width: 100%;
           position: relative;
           text-align:center;
           margin-bottom:10px; }

.top-bar ul { display:inline-block;
              margin-left: auto ;
              margin-right: auto ;}

.top-bar ul > li { display:inline-block;
                   margin-left: auto ;
                   margin-right: auto ;}

 #menu-divider { color:#ffffff;
                font-size: 24px;}

正如您在图片中看到的那样，我构建它的方式意味着我的中心 li 元素（我的徽标图片）并不完全位于中心，因为其他 li 元素具有不同的宽度，这意味着它们都集中在一起.我所追求的是死点处的徽标，然后是其他 li 元素，因为它们以徽标为中心。

在此先感谢您的帮助！

Answer 1

您可以尝试一下，但我很确定这可以解决问题： http://codepen.io/anon/pen/dYXQpz

使用 3 个容器（这意味着您失去了作为 ul 的导航）。弯曲它们并在左侧和右侧内部弯曲元素（第一个结束，另一个开始）

<div class="nav-bar">

  <div class="sideNav leftNav">
    <div class="menu">
      MENU 1
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 2
    </div>
  </div>
  <div class="logo">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
  </div>
  <div class="sideNav rightNav">
    <div class="menu">
      MENU 3
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 4
    </div>
  </div>


</div>

然后应用css。它可以改进，但可以帮助您入门。

.nav-bar {
  background: pink;
  display: flex;
}

.sideNav {
  flex: 1 0 auto;
  background: red;
  display: flex;
}

.leftNav {
  justify-content: flex-end;
}

.rightNav {
  justify-content: flex-start;
}

.sideNav > div {
  margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}

希望对您有所帮助。我喜欢 flexbox。

围绕中心徽标图像进行居中导航

Centering Navigation around a centre logo image

html

css

zurb-foundation