Question

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

我使用基础建立一个网站，我建立导航栏的方式如下：

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元素具有不同的宽度，这意味着它们都集中居中。我所追求的是死亡中心的徽标，然后是徽标周围的其他元素。

提前感谢您的帮助！

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。

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

1 个答案: