html - CSSで中央に浮きますか?

Question

CSSで複数のボックスを中央に配置する方法は? div「ナビゲーション」があるとします。さて、ナビゲーション マージンはautoです。つまり、中央display:inlineにあります。両側にナビゲーションを展開するナビゲーション内に list() を追加するにはどうすればよいでしょうか。width プロパティを設定していないため、幅は動的に拡張されます。そのようなfloat :center。

Answer 1

設定margin:autoしwidth:940pxて完了です。必要に応じて幅を変更できます。ただし、ある程度の幅を与えることは必須です。

このフィドルをチェックして、役に立ったかどうか教えてください。 http://jsfiddle.net/JNMZ3/4/

スペースを増やすために、li 要素のパディングを変更できます。次に、ナビゲーション div の幅を調整して中央に保ちます。

Answer 2

これが実用的なものです。

使用マージン: 0 auto; ほとんどの場合、要素が中央に配置されます。(簡単な注意: これが機能するには、要素に宣言された幅が必要です。)

マージン: 0 auto; rule は、0 の上マージンと下マージン、および自動の左マージンと右マージンの省略形です。左右の自動余白が連携して要素をコンテナの中央に押し込みます。

マージン: 0 auto; 設定はすべてのセンタリング状況で完全に機能するわけではありませんが、多くの状況で機能します。
参考： CSS HTMLで中央を浮かせられない

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 100px; 
background:red; 
float:left; 
} 

.rightsidebar { 
background:blue; 
height: 608px; 
width: 100px; 
float:right; 
} 

.content { 
width: auto; 
margin:0 auto;
background:yellow; 
height:608px; 
}

Answer 3

これを試して、CSSを置き換えてください

http://jsfiddle.net/JNMZ3/3/

.navigation li{
    margin: 3px 6px 3px 6px;
    display: inline;
    border: 2px solid black;
    padding: 2px;
    zoom:1;
    width:auto;
}