Question

我需要将使用无序列表的固定标题导航居中。当我在其中放置背景图像时，中间列表项保持为空。

现在它“看起来”居中，但如果你对浏览器窗口进行橡皮擦，你可以看到它不是。我可以通过将宽度从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，它将正确居中

工作小提琴：

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

Answer 2

将ul设为display:inline-block;

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

演示：http://jsfiddle.net/2GG7Y/10/

Answer 3

还可以使用inline-table

ul {
  display:inline-table;
}

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

您可以使用

进一步使CSS表格更进一步

li {
  display:table-cell;
}

虽然这些元素可以在大多数浏览器中使用，但您可能需要交叉测试后备。

带/ CSS的中心菜单

3 个答案: