導航菜單的CSS居中問題

我需要一些CSS編碼的幫助。我一直試圖讓這個導航菜單集中在頁面上，無論我做什麼，我都無法讓它工作。我已經嘗試了填充左側，空白左側，文本對齊：中心，沒有任何工作。菜單繼續保持在比左側更多的位置。導航菜單的CSS居中問題

這是問題的一個截圖：http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

我敢肯定，這是很簡單的東西，但我似乎無法找出什麼我做錯了嗎？

這裏是頁的活鏈接：http://blacktiphfishing.org/test.html

任何幫助，不勝感激！

來源

2011-08-12 Joshua Jorgensen

您可以發佈您的CSS嗎？ – yoozer8

先加overflow:hidden爲#nav, #nav ul清除浮動。然後加入margin:0 auto。但這總是需要一個固定的寬度，所以將它設置，例如：width:760px因此，新的CSS是：

#nav, #nav ul { 
    list-style: none outside none; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 0; 
    position: relative; 
    width: 760px; 
    z-index: 30; 
}

來源

2011-08-12 12:28:58 Sotiris

@VAShhh我寫了'＃nav'，所以在這種情況下是（150px + 2px）* 5 = 760px – Sotiris

謝謝你的幫助。我試過你的代碼，我發現溢出：隱藏導致子菜單不顯示？ –

@Joshua Jorgensen如果你不清除浮標，那麼設計「打破」，並創建你的問題 – Sotiris

如果刪除

margin:0;從#nav

它看起來居中。

測試在Chrome

來源

2011-08-12 12:28:36

你需要指定MainMenu div的精確寬度，並設置了左右如果您想要達到正確的居中佈局，請將邊距設爲自動。

確切寬度將是780px（150像素* 5（5鏈接每個行）+ 10px的* 2（10px的左+ 10px的右邊緣）+ 2px的* 5（右每個L1的餘量））

使用這個CSS：

#mainMenu { 
    background: none repeat scroll 0 0 #000000; 
    border: 10px solid #000000; 
    color: #FFFFFF; 
    display: block; 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
    width: 780px; 
}

爲了讓導航部分中心

來源

2011-08-12 12:31:13 VAShhh

謝謝你的幫助。我用你的代碼，導航菜單沒有完全居中。菜單比左側更靠右，而不是右側。我改變了： width：780px;到寬度：760px; 和導航菜單完全居中。請問爲什麼要在後臺添加更多代碼？ –

我沒有添加任何代碼，你看到的代碼是由螢火蟲提供的 - 實際上'background'指令是無用的，我添加的東西是'固定寬度'和'左右邊距自動'; ）很高興它的工作，不要忘記批准你的問題的解決方案！ – VAShhh

如何批准解決方案？我是這個網站的新手，對格式不熟悉。 –

CSS佈局有時可能會讓人頭疼。嘗試在Chrome瀏覽器中使用「檢查元素」或在Firefox中使用firebug以啓用/禁用和更改樣式以進行微調。

來源

2011-08-12 12:32:10 PhilJ

導航菜單的CSS居中問題

回答

相關問題