auto
では何をしますかmargin: 0 auto;
?
何が効果があるのか理解できないようですauto
。オブジェクトを中央に配置する効果があることは知っています。
ベストアンサー1
width
適用したオブジェクトに を指定するとmargin: 0 auto
、オブジェクトは親コンテナー内の中央に配置されます。
auto
2 番目のパラメータとして指定すると、基本的にブラウザに左余白と右余白を自動的に決定するように指示し、それらを均等に設定します。これにより、左余白と右余白が同じサイズに設定されることが保証されます。最初のパラメータ 0 は、上余白と下余白の両方が 0 に設定されることを示します。
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
したがって、例親が 100 ピクセルで子が 50 ピクセルの場合、プロパティはとauto
の間に共有する空きスペースが 50 ピクセルあると判断します。margin-left
margin-right
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;
つまり、次のようになります。
margin-left: 25;
margin-right: 25;
これを見て下さいjsFiddle親の幅を指定する必要はなく、子オブジェクトの幅のみを指定します。