私の子要素が「left: 50%」で左揃えにならないのはなぜですか?

CSS の「Left」プロパティが期待どおりに配置されない

「left: 50%」プロパティを適用して子要素を親要素と同様に、子要素が期待どおりに整列しない場合があります。この不一致は、CSS の配置が特定の基準に基づいて行われるために発生します。

CSS での配置を理解する

提供されたコード スニペットでは、2 つの div に CSS スタイルを指定しています。 「外側」（親）と「内側」（子）。子 div の CSS には「left: 50%」が含まれており、子の左境界線を親 div 内の中央に配置することを望んでいます。ただし、このアプローチはプロパティ「position」が欠落しているために失敗します。

「Position」プロパティの追加

「left」プロパティを有効にするには、次のことを行う必要があります。子 div の「position」プロパティを定義します。このプロパティは、要素の配置動作を指定します。主なオプションは 2 つあります。

• absolute: ドキュメントの通常のフローから要素を削除し、最も近い位置にある祖先 (この例では「outer」など) を基準にして要素を配置します。 case).
• relative: ドキュメント フロー内の通常の位置を基準にして要素を配置します。

改訂されたコード スニペット

「position:Absolute;」を追加することで

#inner {
   position: absolute;
   left: 50%;
}

視覚的確認のためのデモ

変更された CSS が意図したとおりに親 div 内で子 div をどのように中央に配置するかを確認するには、http://jsfiddle.net/vrse2/6/ にある更新されたデモを参照してください。

以上が私の子要素が「left: 50%」で左揃えにならないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。