CSS の「left」属性が要素の中央に配置されないのはなぜですか?

CSS の「left」属性が機能しない

CSS では、「left」プロパティは、要素を含む要素に対する相対的な要素の水平位置を制御するために使用されます。ただし、「left」プロパティが正しく機能するには、含まれる要素の幅、高さ、位置が定義されていることを確認することが重要です。

提供されたコード例を参照すると、子を配置しようとしています。 div ("inner") を親 div ("outher") 内に配置し、その左端が "left: 50%" を使用して親 div の中心に揃うようにします。ただし、指定したコードは子 div を正しく配置していません。

修正:

子 div を正しく配置するには、次の位置以外の位置を指定する必要があります。含まれる div (「外側」) の場合は「static」。これは、「静的」位置が HTML の要素のデフォルト値であり、正確な位置決めができないためです。

調整されたコード:

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
   position: relative; // Add this line
}

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

設定による「position」プロパティを子 div の場合は「absolute」に、それを含む div の場合は「relative」に設定すると、「left」プロパティの適切な参照ポイントを確立します。これにより、子 div がそれを含む div を基準にして配置され、その左端が意図したとおり親 div の中心に揃うようになります。

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