CSS：Center Align

Question

私はfloat:left;で次のCSSメニューを持っています。どうすればこのセンターを作ることができますか？ margin:0 autoはどこに追加しますか？

CSS：

/* === 7. Navigation === */ 

#nav{ 
    width:100%; 
    margin:30px auto; 
} 

.ie7 #nav{ 
    padding:10px 0 0 30px; 
} 

#nav ul li{ 
    margin:0 auto; 
} 

#nav li{ 
    float:left; 
    text-align:center; 
    list-style:none; 
    font-weight:bold; 
} 
#nav li a{ 
    margin-right:30px; 
    text-decoration:none; 
    color:#5d5e5d; 
} 

#nav li a:hover{ 
    text-decoration:underline; 

} 

#nav li a:active{ 
    font-family:inherit; 
    font-size:inherit; 
    color:#fff; 
} 

HTML：

<ul id="nav"><!--Navigation--> 
        <li id="homenav"><a href="#home">Home</a></li> 
        <li id="portfolionav"><a href="#portfolio">Portfolio</a></li> 
        <li id="contactnav"><a href="#contact">Contact</a></li> 
    </ul> 

Answer 1

あなただけdisplay:inline-blockの代わりfloat:leftとしてあなたのリスト項目を宣言し、突起部そうのように、中央にtext-alignプロパティを設定することができます。

CSS

​​

この方法では、幅に関係なくメニューが中央に表示されます。

Answer 2

まず、あなたの#nav要素が幅を100％未満を持っている必要があります。その後、 "margin：0 auto"を追加すると、それが中心になるはずです。

Answer 3

内側#nav {...};。この機能を利用するには、ナビに固定幅が必要であることに注意してください。

Answer 4

#navの表示プロパティを左右の両方の表と余白として追加します。あなたのメニューを中心に、指定された幅を持っていない場合

#nav{ 
    display:table; 
    margin-left:auto; 
    margin-right:auto; 
} 

Answer 5

thisの記事をご覧ください。それは私が中心の問題を抱えているときに私のために働く。そのクロスブラウザも互換性があります。