ホームページ  >  記事  >  ウェブフロントエンド  >  「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?

「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-10 06:06:03896ブラウズ

Why Doesn't `margin: auto` Center Absolutely or Fixed Positioned Elements?

Margin:auto だけでは配置された要素が中央に配置されない理由

位置を使用して親コンテナ内の div 要素を中央に配置しようとすると、次のようになります。絶対または位置: 固定プロパティ、マージン: 自動を使用するだけでは不十分な場合があります。

CSS 仕様を理解する

CSS 仕様によると、位置を持つ要素の場合:相対または位置: 静的 (通常のフロー)、margin-left と margin-right の両方を自動に設定すると、使用される値が等しくなるため、その要素を含むブロックに対して要素が水平方向に中央揃えになります。ただし、これは、position:Absolute または Position:fixed の要素には適用されません。

left、width、right の 3 つすべてが auto である絶対位置または固定位置の要素の場合、margin-left の使用値が使用されます。中央揃えを防ぐために、margin-right は 0 に設定されます。このような要素を中央に配置するには、左、右、または幅の値を定義する必要があります。

左、右、幅を設定する効果

左、右の場合、と幅がすべて定義されている場合、マージンは同じ値になり、結果として中央揃えになります。これらの値のいずれかを省略すると、要素が中央揃えからずれる原因になります。

さまざまなケースのデモ

次の表は、CSS で説明されているさまざまなケースを示しています。仕様:

Margin Setting Centring
margin-left: auto; margin-right: auto Yes (flow element)
margin-left: auto; margin-right: auto No (absolute/fixed element)
left: auto; right: auto; width: auto No (margin set to 0)
left: 0; right: 0; width: auto No (margin set to 0)
right: auto; left: auto; No (margin set to 0)
left: auto; right: auto; width: 200px Yes (equal margins)
left: 0; width: auto Yes (equal margins)
right: 0; width: auto Yes (equal margins)

以上が「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。