以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爲中心的菜單

回答

相關問題