html - 带 CSS 的居中菜单

Question

jsFiddle

我需要将使用无序列表的固定标题导航居中。中间的列表项留空，因为我将背景图像放在那里。

现在它“看起来”居中，但如果您在浏览器窗口上画橡皮筋，您会发现它不是。我可以通过将宽度从 960px 减少到 ~780px 来实现几乎中间，但我不想这样做。

我确定我在这里忽略了一些简单的事情。谢谢!

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

将 display: inline-block; 添加到 ul 中，它将正确居中

工作 fiddle :

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