CSSの中心要素

Question

なぜ '左右の余白をautoとmaxに設定するのですか？そして分。 width 'は要素を中心にしますか？

#header{ 
    max-width: 1400px; 
    min-width: 360px; 
    margin-left: auto; 
    margin-right: auto; 
} 

私はそれを取得しません。

Answer 1

それは2で素子の左右に空きスペースの合計を分割しmargin-leftようmargin-right、従ってそれをセンタリングすることを使用します。それについて考えてのもう一つの方法は、親の幅から、子の幅を引いた後、ので、もし実際には2

により、margin-leftとmargin-rightはまだ、autoに設定されていることを割るれますJavaScriptで値を取得しようとすると、"auto"が得られますが、その背後にあるロジックです。

その背後にある数学は次のとおりです。

marginLeft = (parentWidth - childWidth)/2 
marginRight = marginLeft 

Answer 2

左右の余白の両方でautoが等しく「利用可能」スペースを取るので、要素は中央に整列しています。

左側の余白または右側の余白がautoの場合、要素が右または左にフラッシュされたように見える「使用可能な」スペースをすべて占有します。

詳細はsourceをご覧ください。

あなたは簡単に次のデモを理解することができます：あなたはdiv要素は、すべての利用可能なスペースを取っているマージン左autoを使用する場合

div{ 
 
    max-width: 300px; 
 
    background-color: red; 
 
    margin-left: auto; 
 
}

<div> 
 
auto 
 
</div>

上記のスニペットでは、あなたが見ることができますそれは右に押しました。さて、あなたはmargin-right:auto;を使って要素を左に押すと考えることができます。したがって、両方を使用すると、使用可能な両方のスペースを占めることによって、中央にとどまるよう強制されます。

Answer 3

私は他の回答の徹底性に満足していないので、ここでより詳細な説明があります。一般的に、w3c Recommendationはこれについて非常に詳しく説明しており、より正確な回答が必要な質問については相談する必要があります。

---

一般的な使用ケースmargin: 0 auto（上下セットに0、左右自動には）等分し、使用可能なスペースを計算し、プロパティの各auto値に適用ブラウザを有することによって動作します。

availableSpace = (parentWidth - childWidth) 
marginLeft, marginRight = availableSpace/amountOfAutoValues 

この意志：また例（実際の数学の非常に単純化された可視化だとして、私は、引用符でこれを入れて）これに非常に近い「その背後にある数学」を提供する試みにおいて

以下の条件の下での作業（簡体字）は：

• そうではありませんabsolute - またはfixedは
• それが浮いていないが-positioned
• それはinline要素ではありません（これは間違っている、「それはblock要素でなければなりません」とは区別されるべきである - 例えば、inline-blockは動作しません）これらのモードは、すでに上書きこれは、ある

文書内のオブジェクトの場所、およびマージンの計算は有利ではない可能性が高い。

---

唯一の要件は、それが技術的に適用するためだけのマージン設定である - へ順に、親よりも小さなあなただけwidth（またはmax-width）を設定する必要がありますが、他のシナリオのように、効果を参照してください利用可能なスペースは単に0になります。
min-widthは、このように自動余白に影響しません。

Answer 4

代わりmax-widthとmin-widthのあなたは、コードのmargin + auto値と残りの部分と一緒display:tableを使用した場合は、同じ結果を得ることができました。 margin-leftとだけ残した場合は、ページの右端に合わせます。margin-rightを左端に配置すると、左端に合わせます。margin-left margin-rightのままにするとどうなるでしょうか？私はあなたがパラドックスを創造しないと確信しています。 :)

-------------------------> margin-left:auto 

margin-right:auto <------------------------ 

margin-left:auto <-------> margin-right:auto