Wie positioniere ich ein Bild vertikal und horizontal zentriert innerhalb eines übergeordneten Divs?

Bildelemente innerhalb übergeordneter Divs zentrieren

Wenn Sie versuchen, ein Bild zentral innerhalb seines übergeordneten Divs zu positionieren, ist das gewünschte Ergebnis für Bild so, dass es innerhalb des übergeordneten Elements vertikal zentriert bleibt und gleichzeitig seine inhärente Höhe beibehält.

Lösung:

Um diesen Effekt zu erzielen, ändern Sie die CSS-Deklaration des übergeordnetes .box div anstelle des untergeordneten .box img div, indem Sie text-align: center; hinzufügen. Diese Änderung stellt sicher, dass alle Inline-Elemente innerhalb des übergeordneten Divs zentral ausgerichtet sind.

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

Folglich garantiert das aktualisierte CSS, dass das Bildelement immer in der Mitte seines übergeordneten Divs positioniert wird und seine tatsächliche Höhe beibehält .

Behebung des vertikalen Lückenproblems:

Bei weiterer Untersuchung wurde festgestellt, dass unter dem zentrierten Bild eine 5-Pixel-Lücke aufgetreten war. Diese Lücke ist auf die Zeilenhöhenreservierung für Inline-Elemente wie zurückzuführen. Um diese Lücke zu schließen, vertikal ausrichten: unten; sollte dem CSS des Bildes hinzugefügt werden.

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

Durch Befolgen dieser Schritte können Sie Bilder effektiv innerhalb übergeordneter Divs zentrieren und dabei ihre beabsichtigte Höhe beibehalten, während gleichzeitig unbeabsichtigte vertikale Lücken beseitigt werden.

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Bild vertikal und horizontal zentriert innerhalb eines übergeordneten Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!