центрирование логотипа в стационарной навигации

Question

В настоящее время я использую поплавки, чтобы разместить мой логотип в центре моего фиксированного меню навигации. Проблема, с которой я сталкиваюсь в настоящее время, состоит в том, что элементы, которые я разместил вправо, отображаются в обратном порядке.

Как использовать выравнивание текста для достижения желаемого результата и по-прежнему поддерживать фиксированный заголовок навигации?

текущий код:

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

Answer 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>

Конечно, вы можете все элементы в пучках together..in этом случае вам не нужны поплавки на всех

JSFiddle Demo

Затем снова, есть этот, который мне нравится (не мой), который еще лучше: Codepen Demo