在固定导航中居中徽标答案

【问题标题】：centering logo in fixed navigation在固定导航中居中徽标
【发布时间】：2015-07-20 02:27:53
【问题描述】：

我目前正在使用浮动来将我的徽标放在固定导航菜单的中心。我目前面临的问题是我浮动到右侧的项目以相反的顺序显示。

我如何使用 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;
}

【问题讨论】：

这个问题有很多解决方案，但取决于你是否可以更改 HTML。
首先，修复你的css代码，有一些错误，例如，在填充和边距中，没有使用（，）来分隔尺寸，（使用填充：0 100px 0 0），位置相对是.logo 对象中没有必要，最后你为什么要在你的 logo 中使用 text-indent？
我可以改变它，是的。我只需要在菜单项中间需要徽标，并以正确的顺序列出项目。谢谢！
感谢您指出 xzegga 的这些问题，但就目前而言，这些小错误并不是我寻求帮助的原因。有需要的请再看我的帖子。

标签： css navigation

【解决方案1】：

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

* {
  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

【讨论】：

谢谢，这很有帮助！想知道你把它捆绑在一起是什么意思？
查看 JSFiddle 演示
实际上，这会产生另一个问题。我需要修复导航。我该如何解决？
您可以在nav 元素上设置固定位置.. 它不应该影响任何东西....但这是一个不同的问题。
那是因为你没有在导航上设置宽度 - jsfiddle.net/tzsLorLh/1