Warum zentriert meine CSS-Eigenschaft „left' mein Element nicht?

CSS-Eigenschaft „left“ funktioniert nicht

Beim Versuch, ein Element mit der Eigenschaft „left“ an der Mitte eines übergeordneten Elements auszurichten Wenn das Element nicht korrekt positioniert ist, tritt möglicherweise ein Fehler auf.

Stellen Sie sich ein Szenario mit zwei ineinander verschachtelten Divs vor. Um den linken Rand des inneren Divs innerhalb des übergeordneten Divs zu zentrieren, verwenden Sie normalerweise das folgende CSS:

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

Dieser Code funktioniert jedoch möglicherweise nicht, wenn das innere Div keine definierte Position hat. Standardmäßig haben Elemente die Position „statisch“, was keine absolute Positionierung zulässt.

Um dieses Problem zu beheben, müssen Sie die Position des inneren Div auf „absolut“ oder „relativ“ festlegen. Dadurch können Sie die Eigenschaft „left“ verwenden, um das Element innerhalb des übergeordneten Div zu positionieren.

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

Indem Sie die Position auf „absolut“ festlegen, wird das innere Div vom normalen Dokumentfluss getrennt und kann dort platziert werden mit absoluten Koordinaten positioniert werden. Die Eigenschaft „left“ wird jetzt als horizontaler Versatz vom linken Rand des übergeordneten Div interpretiert, wodurch das innere Div effektiv darin zentriert wird.

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