Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich ein Bild horizontal und vertikal innerhalb eines Div?

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

Mary-Kate Olsen
Freigeben: 2024-11-24 07:22:10
Original
926 Leute haben es durchsucht

How to Center an Image Horizontally and Vertically within a 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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage