Centered Меню ж/CSS

Question

jsFiddle

Мне нужно центрировать свой фиксированный СЧ заголовка, который с помощью маркированного списка. Элемент среднего списка остается пустым, так как я помещаю на него фоновое изображение.

Прямо сейчас он «выглядит» по центру, но если вы используете резиновое окно браузера, вы можете видеть, что это не так. Я могу достичь почти среднего, уменьшив ширину от 960 пикселей до ~ 780 пикселей, но я не хочу этого делать.

Уверен, что я пропустил здесь что-то простое. Благодаря!

HTML:

<header> 
    <nav> 
     <ul> 
      <li><a class="active" href="#">Home</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Services</a></li> 
      <li class="logo"></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 


body{ 
    background-color: #ebebeb; 
} 

nav { 
    width: 960px; 
    margin: 0 auto; 
} 

ul{ 
    list-style-type: none; 
    text-align: center; 
} 

li{ 
    display: inline-block; 
    height: 120px; 
    float: left; 
    text-align: center; 
    line-height: 120px; 
    margin-right: 30px; 
} 

.logo { 
    height: 130px; 
    width: 164px; 
    background:url(http://samaradionne.com/img/typeBlack.png) no-repeat; 
} 

section.stretch{ 
    float: left; 
    height: 1500px; 
    width: 100%; 
} 

header{ 
    width: 100%; 
    background: #fff; 
    border-bottom: 1px solid #aaaaaa; 
    position: fixed; 
    z-index: 10; 
    text-align: center; 
} 

header a{ 
    color: #969696; 
    text-decoration: none; 
    font-family: sans-serif; 
    text-transform: uppercase; 
} 

Answer 1

Может также использовать inline-table

ul { 
    display:inline-table; 
} 

http://jsfiddle.net/2GG7Y/13/

Вы можете взять таблицу CSS шаг вперед с

li { 
    display:table-cell; 
} 

Хотя эти элементы будут работать в большинстве браузеров, вы можете пересечь тест на откаты.

Answer 2

Добавить display: inline-block; в ul и это будет правильно центр

Работа скрипку:

http://jsfiddle.net/2GG7Y/12/

Answer 3

установить ul в display:inline-block;

ul{ 
    list-style-type: none; 
    text-align: center; 
    display:inline-block; 
} 

демо: http://jsfiddle.net/2GG7Y/10/