CSS の「left」プロパティが要素の中央に配置されないのはなぜですか?

CSS の「left」プロパティが機能しない

「left」プロパティを使用して要素を親要素の中央に揃えようとしたとき要素が正しく配置されていない場合、エラーが発生する可能性があります。

2 つの div があり、1 つはネストされているシナリオを考えてみましょう。もう一方の中で。内部 div の左境界線を親 div 内で中央に配置するには、通常、次の CSS を使用します:

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

ただし、内部 div の位置が定義されていない場合、このコードは機能しない可能性があります。デフォルトでは、要素の位置は「静的」であり、絶対的な配置は許可されません。

この問題を解決するには、内部 div の位置を「絶対」または「相対」に設定する必要があります。これにより、「left」プロパティを使用して親 div 内に要素を配置できるようになります。

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;  // Or position: relative;
   left: 50%;
}

位置を「absolute」に設定すると、内部 div が通常のドキュメント フローから切り離され、親 div 内に要素を配置できます。絶対座標を使用して配置されます。 「left」プロパティは、親 div の左端からの水平オフセットとして解釈されるようになり、内部 div が効果的に親 div の中央に配置されます。

以上がCSS の「left」プロパティが要素の中央に配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。