0

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

3 回答 3

3

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

工作小提琴:

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

于 2013-04-09T19:11:53.347 回答
1

设置uldisplay:inline-block;

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

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

于 2013-04-09T19:14:17.307 回答
1

也可以使用inline-table

ul {
  display:inline-table;
}

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

您可以使用 CSS 表更进一步

li {
  display:table-cell;
}

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

于 2013-04-09T19:14:29.693 回答