Wie zentriere ich ein Bild innerhalb eines übergeordneten Div?

Zentrieren eines Bildes innerhalb eines übergeordneten Div

Das Beibehalten eines zentral ausgerichteten Bildes innerhalb eines übergeordneten Div kann die Ästhetik und Benutzererfahrung der Website verbessern. In diesem Artikel wird erläutert, wie Sie diese Ausrichtung effizient erreichen können.

Problemstellung:

Richten Sie ein Bild innerhalb eines übergeordneten Divs so aus, dass sein Mittelpunkt in der Mitte des Divs bleibt , um sicherzustellen, dass sich das Bild über die gesamte Höhe des Div erstreckt, ohne seine Breite zu dehnen.

Lösung:

Anstatt den text-align: center; CSS-Deklaration für das Bildelement, fügen Sie sie dem übergeordneten .box-Element hinzu.

.box {

height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align: center;  // align center all inline elements

}

Dieser Ansatz stellt sicher dass alle Inline-Elemente innerhalb des .box-Divs zentriert sind, einschließlich des Bildes.

Zusätzliche Überlegungen:

Wenn unter dem Bild eine 5-Pixel-Lücke erscheint, ist dies der Fall kann sich aus der standardmäßigen Zeilenhöhe ergeben, die mit Inline-Elementen verknüpft ist. Um diese Lücke zu schließen, wenden Sie Vertical-Align: Bottom; zum Bildelement:

.box img {

height: 100%;
width: auto;
vertical-align: bottom; // fix the vertical gap

}

Durch die Implementierung dieser Änderungen können Sie Ihr Bild effektiv innerhalb des zentrieren übergeordnetes Div und stellen Sie das gewünschte Erscheinungsbild sicher.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Bild innerhalb eines übergeordneten Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!