Warum zentriert mein CSS-Attribut „left' mein Element nicht?

CSS-Attribut „left“ funktioniert nicht

In CSS wird die Eigenschaft „left“ verwendet, um die horizontale Position eines Elements relativ zu seinem enthaltenden Element zu steuern. Es muss jedoch unbedingt sichergestellt werden, dass das enthaltende Element eine definierte Breite, Höhe und Position hat, damit die Eigenschaft „left“ ordnungsgemäß funktioniert.

Bezogen auf Ihr bereitgestelltes Codebeispiel versuchen Sie, ein untergeordnetes Element zu positionieren div („inner“) innerhalb eines übergeordneten Div („outher“), sodass sein linker Rand mit der Mitte des übergeordneten Div ausgerichtet ist, indem „left: 50 %“ verwendet wird. Der von Ihnen angegebene Code richtet das untergeordnete Div jedoch nicht richtig aus.

Die Lösung:

Um das untergeordnete Div korrekt zu positionieren, müssen Sie eine andere Position als angeben „statisch“ für das enthaltende div („outher“). Dies liegt daran, dass die „statische“ Position der Standardwert für Elemente in HTML ist und keine genaue Positionierung ermöglicht.

Angepasster Code:

#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%;
}

Durch Einstellung Wenn Sie die Eigenschaft „position“ für das untergeordnete Div auf „absolut“ und für das enthaltende Div auf „relativ“ setzen, legen Sie einen geeigneten Bezugspunkt für die Eigenschaft „links“ fest. Dadurch wird sichergestellt, dass das untergeordnete Div relativ zum enthaltenden Div positioniert ist und seine linke Kante wie beabsichtigt an der Mitte des übergeordneten Div ausgerichtet ist.

Das obige ist der detaillierte Inhalt vonWarum zentriert mein CSS-Attribut „left' mein Element nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!