在CSS中居中一個元素

Question

我確信這個問題已被問到，通常我可以用margin來完成：0 auto;或其他的東西，但在這個網站上：otgtires.com我似乎無法將導航欄放在其父元素的頂部。我會在這裏粘貼一些代碼，但我認爲在瀏覽器中使用開發工具更容易。請讓我知道我失蹤了！

編輯：縮小，如果它已經看起來居中。

所以，如果你放大網站上的瀏覽器，你會看到所有其他元素保持相對位置，但導航欄保持在左側。無論如何放大/縮小用戶窗口，我都希望導航欄始終位於頁面的中心位置。

Answer 1

它不是「居中」的，因爲它目前使用基於百分比的寬度。嘗試一個固定的寬度，而不是：

#top_navigation { 
    width: 500px; 
    margin: 0 auto; 
    } 

編輯：

此外，可以考慮使用下面的明確修復由於導航元素是內聯和下面的含量趨向於弄混當瀏覽器寬度被縮短：

#top_navigation { 
    overflow: hidden; 
    } 

這是你的網站與上面的代碼截圖展示注射的水平居中：

Answer 2

@gmeben是正確的，那是因爲你的

#top_navigation { width: 100% } 

我趕緊把它改爲

#top_navigation { width: 1125px; margin: 0 auto; } 

，它是居中。

Answer 3

#top_navigation { 
width: 1125px; 
margin: 0 auto 0 auto; 
}