「margin: 0 auto;」の条件は何ですか？要素を中央に配置するには?

秘密を明らかにする: 要素を魔法のように中央に配置するための「Margin: 0 Auto」の前提条件

謎の「margin: 0 auto;」 CSS プロパティは、要素を簡単に水平方向に整列させようとする開発者を長い間当惑させてきました。中央に配置された傑作を作成する力を持っていますが、要素とその親内で特定の基準を満たす必要があります。これらの要件を詳しく見てみましょう:

1.重要な要素のプロパティ:

• ブロック レベルの表示: 要素はブロック レベルである必要があります。つまり、使用可能な幅全体にわたるボックスとして表示されます。これは、display: block または display: table を使用して実現できます。
• No Floating: CSS プロパティ float によって制御される Floating は回避する必要があります。フローティングは通常のフローから要素を削除し、「margin: 0 auto;」に応答できなくなります。
• 適切な配置: 要素を通常の位置から切り離す固定および絶対配置フロー内で「マージン: 0」のセンタリング効果を妨害します。自動;".

2.コンパニオンの親プロパティ:

• 十分な幅: 要素には auto 以外の定義された幅が必要です。自動幅は要素の固有のサイズを優先し、「margin: 0 auto;」によって意図された中央揃えを事実上上書きします。

「margin: 0 auto;」では、これらすべての条件が同時に満たされる必要があることに注意してください。 」センタリングの魔法を働かせるためです。位置決めルールの例外は、左の場合に適用されます: 0;右: 0;固定または絶対位置と並行して指定されます。ただし、「margin: 0 auto;」に注意することが重要です。技術的には自動幅が機能しますが、自動幅が優先され、センタリングが無効になります。

以上が「margin: 0 auto;」の条件は何ですか？要素を中央に配置するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。