Warum wird mein untergeordnetes Element bei „links: 50 %' nicht nach links ausgerichtet?

CSS-Eigenschaft „Links“ wird nicht wie erwartet ausgerichtet

Beim Anwenden der Eigenschaft „links: 50 %“ zum Positionieren eines untergeordneten Elements innerhalb eines Wenn Sie ein übergeordnetes Element verwenden, kann es vorkommen, dass das untergeordnete Element nicht wie erwartet ausgerichtet ist. Diese Diskrepanz tritt auf, weil die CSS-Positionierung auf bestimmten Kriterien basiert.

Positionierung in CSS verstehen

Im bereitgestellten Codeausschnitt haben Sie CSS-Stile für zwei Divs angegeben, „äußer“ (Eltern) und „inner“ (Kind). Das CSS für das untergeordnete Div enthält „left: 50 %“, in der Hoffnung, den linken Rand des untergeordneten Elements innerhalb des übergeordneten Div zu zentrieren. Dieser Ansatz schlägt jedoch aufgrund einer fehlenden Eigenschaft fehl: „position“.

Hinzufügen der Eigenschaft „Position“

Damit die Eigenschaft „left“ wirksam wird, müssen Sie Folgendes tun Definieren Sie die Eigenschaft „position“ für das untergeordnete Div. Diese Eigenschaft legt das Positionierungsverhalten eines Elements fest. Sie haben zwei Hauptoptionen:

• absolut: Entfernt ein Element aus dem normalen Fluss des Dokuments und positioniert es relativ zu seinem nächstgelegenen positionierten Vorgänger (z. B. „outher“ in diesem Beispiel). Fall).
• relativ: Positioniert ein Element relativ zu seiner normalen Position im Dokumentfluss.

Überarbeiteter Codeausschnitt

Durch das Hinzufügen von „position: absolute;“ Eigenschaft zum untergeordneten Div hinzufügen, können Sie sicherstellen, dass die Eigenschaft „left: 50 %“ den linken Rand des untergeordneten Elements innerhalb des übergeordneten Div zentriert.

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

Demo für visuelle Bestätigung

Sehen Sie sich die aktualisierte Demo unter http://jsfiddle.net/vrse2/6/ an, um zu sehen, wie das geänderte CSS das untergeordnete Div wie beabsichtigt im übergeordneten Div zentriert.

Das obige ist der detaillierte Inhalt vonWarum wird mein untergeordnetes Element bei „links: 50 %' nicht nach links ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!