So zentrieren Sie ein Bild in einem Div mit CSS

Die Methoden zum Zentrieren von Bildern in Divs in CSS sind: Textausrichtung: geeignet für die vertikale Zentrierung von Bildern und Text. Flexbox: Geeignet zur horizontalen und vertikalen Zentrierung von Bildern. Konvertierung: Funktioniert für Bilder mit fester Größe. Automatische Ränder: geeignet für Situationen, in denen die Breite des Bildes bekannt ist.

So zentrieren Sie das Bild in einem Div in CSS

Methode 1: text-align

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

Diese Methode eignet sich für Situationen, in denen das Bild zusammen mit dem Text vertikal zentriert werden soll .

Methode 2: Flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

Flexbox ermöglicht ein flexibles Layout. Diese Methode eignet sich für Situationen, in denen Bilder horizontal und vertikal zentriert werden müssen.

Methode 3: Transformieren

<code class="css">div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

Diese Methode verwendet absolute Positionierung und Transformation und eignet sich für Bilder mit fester Größe.

Methode 4: Rand automatisch

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

Rand: Automatisch zentriert das Bild automatisch, kann aber nur verwendet werden, wenn die Bildbreite bekannt ist.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Bild in einem Div mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!