Центрирующая панель навигации

Question

У меня возникли проблемы с центрированием моей навигационной панели, я попытался отобразить: встроенный блок, а затем выровнять центр, как и большинство сообщений, но он, похоже, не работает.

HTML:

<!--Navigation--> 
<div class="band navigation"> 
    <nav class="container primary"> 
     <div class="sixteen columns"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

CSS:

nav.primary{ 
    display: table; 
    margin: 0 auto; 
} 

nav.primary ul, nav.primary ul li { 
    margin: 0px; 
} 

nav.primary select { 
    display: none; 
    width: 100%; 
    height: 28px; 
    margin: 21px 0; 
} 

nav.primary ul li { 
    display: inline; 
    float: left; 
    position: relative; 
} 

nav.primary ul li a { 
    display: inline-block; 
    line-height: 49px; 
    padding: 0 14px; 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight: bold; 
    letter-spacing: 0.08em; 
    background: ##999999; 
} 

nav.primary ul li a:hover { 
    background: #2ecc71; 
    cursor: pointer; 
} 

Answer 1

Хорошо, наконец, получил его:

nav.primary ul li { 
display: inline; 
float: left; <--- 
position: relative; 

Удалить поплавок: левый;

Поскольку навигация представляет собой полную ширину содержащего div, нет необходимости возиться с поплавками, элементы списка выстраиваются в линию только с отображением: inline;

Answer 2

Вы пробовали nav.primary ul {text-align: center;} , а также держать левый/правый края к авто, это работает для меня, когда я использовал каркас скелета ,

Answer 3

Я пробовал что-то еще, что работает ... Кажется, что это работает лучше, чем пытаться построить что-то обычное до сих пор в моем опыте работы с скелетом ... Хотя он производит немного менее красивую разметку для HTML, жесткость конечный результат работает для меня. Вот мой код, так что вы можете увидеть, что я сделал, чтобы достичь желаемого эффекта:

<div class="row"> <div class="two columns offset-by-three"> <a href="#" class="nav">Portfolio</a> </div> <div class="two columns"> <a href="#" class="nav">About</a> </div> <div class="two columns"> <a href="#" class="nav">Contact</a> </div> </div>

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