我需要将使用无序列表的固定标题导航居中。中间的列表项留空,因为我将背景图像放在那里。
现在它“看起来”居中,但如果你用橡皮筋浏览器窗口,你会发现它不是。我可以通过将宽度从 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;
}