margin: 0 auto で auto は何をしますか? 質問する

margin: 0 auto で auto は何をしますか? 質問する

autoでは何をしますかmargin: 0 auto;?

何が効果があるのか​​理解できないようですauto。オブジェクトを中央に配置する効果があることは知っています。

ベストアンサー1

width適用したオブジェクトに を指定するとmargin: 0 auto、オブジェクトは親コンテナー内の中央に配置されます。

auto2 番目のパラメータとして指定すると、基本的にブラウザに左余白と右余白を自動的に決定するように指示し、それらを均等に設定します。これにより、左余白と右余白が同じサイズに設定されることが保証されます。最初のパラメータ 0 は、上余白と下余白の両方が 0 に設定されることを示します。

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

したがって、親が 100 ピクセルで子が 50 ピクセルの場合、プロパティはとautoの間に共有する空きスペースが 50 ピクセルあると判断します。margin-leftmargin-right

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

つまり、次のようになります。

margin-left: 25;
margin-right: 25;

これを見て下さいjsFiddle親の幅を指定する必要はなく、子オブジェクトの幅のみを指定します。

おすすめ記事