以CSS为中心的菜单

我需要居中使用无序列表的固定标题nav。中间列表项目留空，因为我正在放置一个背景图像。

现在它“看起来”居中，虽然如果你橡皮筋浏览器窗口，你可以看到它不是。我可以实现差不多中间的宽度从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; 
}

来源

2013-04-09 Black Bird

看看这个主题/回答：http://stackoverflow.com/a/8228669/1375372 – 2013-04-09 19:10:55

我能够通过添加“display：inline-block;”来获得标题中心。到ul元素。 – jennyfofenny 2013-04-09 19:10:55

和另一个线程（必须有数百个）http://stackoverflow.com/a/14511370/1340674 – Pevara 2013-04-09 19:24:22

也使用inline-table

ul { 
    display:inline-table; 
}

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

你可以采取的CSS表更进一步与

li { 
    display:table-cell; 
}

虽然，这些元素将在大多数浏览器中工作，你可能要跨越测试回退。

来源

2013-04-09 19:14:29

我喜欢这样你正在使用表格和单元格，我认为这将允许我使用垂直对齐也不行？理想情况下，我想删除线条的高度，使其与标识垂直居中。 – 2013-04-09 19:22:48

如果你想这样做，你可以只使用'ul'显示样式，并在''li''样式中使用'display：inline-block'。我会将'ul'之外的图像作为实际的'img'自己移动，以保证安全。如果（由于某些可怕的原因CSS被禁用或未加载），您的徽标仍然会显示。再加上它是SEO的可读内容。赢得胜利的“alt”文本。 – 2013-04-09 19:36:46

看看这个小提琴。它还使用响应宽度，因此您不会陷入960像素的内容块。 http://jsfiddle.net/2GG7Y/16/ – 2013-04-09 19:43:36

添加display: inline-block;到ul，它会妥善中心

工作小提琴：

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

来源

2013-04-09 19:11:53

仅供参考 - 我在回答时没有看到上述评论，他们发布在同一时间，我认为 – 2013-04-09 19:13:05

设置ul到display:inline-block;

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

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

来源

2013-04-09 19:14:17 lngs

以CSS为中心的菜单

回答

相关问题