css - 固定导航中的居中徽标

我目前正在使用浮动控件，以便将徽标放置在固定导航菜单的中央。我目前面临的问题是，我向右浮动的项目以相反的顺序显示。

如何使用text-align获得所需的结果并仍然保持固定的导航标题？

当前代码：

<img src="img/logo.png" class="logo" />

<ul class="nav">
   <li><a href="#section1" class="item1">A</a></li>
   <li><a href="#section2" class="item2">B</a></li>
   <li><a href="#section3" class="item3">C</a></li>
   <li><a href="#section4" class="item4">D</a></li>
   <li><a href="#section5" class="item5">E</a></li>
   <li><a href="#section6" class="item6">F</a></li>
</ul>

CSS：

header {
  width: 100%;
  padding: 0, 100px, 0, 0;
  margin: 10px, 100px, 35px, 0 ;
  position: fixed;
  height: 6em;
  background: transparent;
  top: 0;
  z-index: 1;
}
header .logo {
  display: block;
  height: 110px;
  text-indent: -9999px;
  width: auto;
  margin: 0 auto;
  position: relative;
}
header ul {
  margin: -85px auto 0 auto;
  height: 10px;
  list-style: none;
}

header li:nth-child(1), header li:nth-child(2), header li:nth-child(3){
  float: left;
}

header li:nth-child(4), header li:nth-child(5), header li:nth-child(6){
  float: right;
}

最佳答案

最明显的解决方案是，将菜单分成两部分，并将徽标放在中间...然后根据需要浮动每个菜单。

* {
  margin: 0px;
  padding: 0;
}
ul {
  margin: 0;
  list-style: none;
  display: inline-block;
}
li {
  display: inline-block;
}
a {
  background: grey;
  color: white;
  padding: .5em;
}
nav {
  text-align: center;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}

<nav>
  <ul class="nav left">
    <li><a href="#section1" class="item1">A</a>
    </li>
    <li><a href="#section2" class="item2">B</a>
    </li>
    <li><a href="#section3" class="item3">C</a>
    </li>
  </ul>

  <a href="#" class="logo">Logo</a>

  <ul class="nav right">
    <li><a href="#section4" class="item4">D</a>
    </li>
    <li><a href="#section5" class="item5">E</a>
    </li>
    <li><a href="#section6" class="item6">F</a>
    </li>
  </ul>
</nav>

当然，您可能希望将所有物品捆扎在一起..在这种情况下，您根本不需要浮子

JSFiddle Demo

再说一次，有一个我喜欢的（不是我的）更好的东西：Codepen Demo

关于css - 固定导航中的居中徽标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31503929/