Wie zentriere ich ein Bild horizontal und vertikal innerhalb eines Div?

Bild in der Mitte und in der Mitte von Div ausrichten

Beim Webdesign ist die präzise Ausrichtung von Elementen für eine ausgefeilte und optisch ansprechende Benutzeroberfläche von entscheidender Bedeutung. Eine häufige Herausforderung besteht darin, ein Bild innerhalb eines Div-Containers so auszurichten, dass es sowohl horizontal als auch vertikal zentriert ist.

Um dieses Problem zu lösen, berücksichtigen Sie die folgende Div-Struktur:

<div>

Um das Bild auszurichten In der Mitte des Div können wir CSS-Eigenschaften verwenden:

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Durch Festlegen von margin-left: auto; und margin-right: auto; weisen wir den Browser an, die horizontalen Ränder des Bildes automatisch anzupassen, um sicherzustellen, dass es innerhalb des Div zentriert ist. Zusätzlich Einstellung display: block; ermöglicht es dem Bild, eine eigene Zeile einzunehmen und somit vertikal zentriert zu sein.

Mit diesen CSS-Eigenschaften wird Ihr Bild unabhängig von der Größe des Bildschirms präzise in der Mitte und in der Mitte des Div-Containers ausgerichtet oder div.

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