「margin: 0 auto;」はどのようにして要素をコンテナ内の中央に配置しますか?

Auto: コンテナ内の要素を中央に配置

2 番目のパラメータとして auto を使用して margin プロパティを定義すると、要素のスタイルが簡単に設定されます。親コンテナ内の中央に配置されます。これは次の理由で発生します:

• 自動計算: ブラウザは自動的に左右の余白を決定し、使用可能なスペースを均等に分割します。
• Equalマージン: 左右のマージンは、対称性を確保するために同じサイズであることが保証されます。 Positioning.

Margin プロパティの内訳:

margin: 0 auto;

• 0 は、上下のマージンを 0 に設定します。
• auto左右のマージンを自動的に計算して中央に配置します。 element.

例:

幅 100 ピクセルの親コンテナと幅 50 ピクセルの子要素を考えます。 auto プロパティは、子のマージン間の利用可能なスペースを計算します:

freeSpace = 100 - 50 = 50px
equalShare = 50 / 2 = 25px

結果:

margin-left: 25px
margin-right: 25px

子要素は親コンテナ内の中央に配置されます。この配置は、[jsFiddle](jsFiddle へのリンク) を通じて実際の動作を観察できます。 auto プロパティを有効にするには、子オブジェクトの幅のみを指定する必要があることに注意してください。

以上が「margin: 0 auto;」はどのようにして要素をコンテナ内の中央に配置しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。