ナビゲーションメニューのCSSセンタリングの問題

Question

CSSのコーディングに関して助けが必要です。私は、このナビゲーションメニューをページの中心に置くよう努めてきました。私が何をしても、私はそれを働かせることはできません。私はパディング - 左、余白 - 左、テキスト - 整列：中央、何も動作していない。メニューは右よりも左に続きます。私はそれは非常に単純なものだと確信していますが、私はちょうど私が間違っているのかを把握することができないようhttp://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

：ここ

は、問題のスクリーンショットですか？すべてのヘルプは大歓迎です http://blacktiphfishing.org/test.html

：

ここではページのライブリンクです！

Answer 1

をテストしました。そして、margin:0 autoを追加.But、これは常に一定の幅を必要とするので、例えば、それを設定します。width:760pxをだから、新しいCSSは次のとおりです。あなたがMainMenu div要素の正確な幅を指定し、彼の左から右に設定する必要が

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

Answer 2

あなたはそれが中心になります#nav

から

margin:0;を削除した場合。

は明確なフロートに#nav, #nav ulためoverflow:hiddenを追加する最初のクロムに

Answer 3

正しい中央配置レイアウトに到達したい場合は、自動余白を設定します。

正確な幅は、780px（150ピクセル×5（5リンク各列）+ 10pxの* 2（10pxのは+ 10pxの右境界左）それぞれのLi + が2ピクセル×5（右マージンであろう））

この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; 
} 

ナビゲーション部分を取得するには

Answer 4

を中心にCSSのレイアウトは時々頭痛になることがあります。 chromeで 'inspect element'を使用するか、firefoxでfirebugを使用して有効/無効にしてスタイルを変更して調整を調整してみてください。