So zentrieren Sie ein Bild in CSS

Im Webdesign sind Bilder ein unverzichtbares Element. Wenn die Größe des Bildes kleiner als die des übergeordneten Containers ist oder die Breite und Höhe des übergeordneten Containers unsicher sind, wird die Zentrierung des Bildes zum Problem. Wir können dieses Problem durch die Flex-Layout- und Positionseigenschaften von CSS lösen.

1. Flex-Layout verwenden

Flex-Layout ist eine neue Layout-Methode, die von CSS3 eingeführt wurde. Es ist sehr einfach, untergeordnete Elemente im übergeordneten Container zu zentrieren.

1. Verwenden Sie die Eigenschaften „justify-content“ und „align-items“

Wir können die Eigenschaften „justify-content“ und „align-items“ im Flex-Layout verwenden, um eine horizontale und vertikale Zentrierung des Bildes zu erreichen. Das Attribut justify-content kann das Layout untergeordneter Elemente in Richtung der Hauptachse steuern, und das Attribut align-items kann das Layout untergeordneter Elemente in Richtung quer zur Achse steuern.

Zuerst müssen wir den übergeordneten Container des Bildes auf display:flex einstellen und align-items und justify-content auf center setzen.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Auf diese Weise wird das Bild horizontal und vertikal zentriert.

2. Verwenden Sie die Attribute „flex-direction“ und „align-self“

Wir können auch die Attribute „flex-direction“ und „align-self“ im Flex-Layout verwenden, um das Bild zu zentrieren. Die Eigenschaft „flex-direction“ kann die Richtung der Hauptachse ändern, während die Eigenschaft „align-self“ das Layout von untergeordneten Elementen in Querrichtung der Achse steuern kann.

Stellen Sie den übergeordneten Container des Bildes auf display:flex ein und legen Sie die Flexrichtung auf Spalte fest.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  flex-direction: column;
}

Als nächstes müssen wir die align-self-Eigenschaft des Bildes auf „center“ setzen, um eine vertikale Zentrierung des Bildes zu erreichen.

img {
  align-self: center;
}

2. Verwenden Sie das Positionsattribut

Zusätzlich zur Verwendung des Flex-Layouts können wir auch das Positionsattribut verwenden, um das Bild zu zentrieren. Die Art und Weise, wie Sie die Positionseigenschaft verwenden, ist etwas anders.

1. Absolute Positionierung verwenden

Wir können das Bild auf absolute Positionierung einstellen und dann die linken und oberen Attribute verwenden, um die Position des Bildes im übergeordneten Container zu steuern. Stellen Sie die Position des übergeordneten Containers auf „relativ“ ein, damit das Bild relativ zum übergeordneten Container positioniert werden kann.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

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

Auf diese Weise wird das Bild horizontal und vertikal zentriert.

2. Negative Ränder verwenden

Wir können auch negative Ränder verwenden, um das Bild zu zentrieren. Diese Methode wird durch das Hinzufügen zusätzlicher Elemente zum übergeordneten Container implementiert. Setzen Sie den übergeordneten Container auf position:relative, fügen Sie ein leeres Element hinzu und platzieren Sie das Bild im leeren Element.

<div class="parent">
  <div class="placeholder"></div>
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

.placeholder {
  height: 100%;
  margin-right: -100%;
}

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

Auf diese Weise kann das Bild auch horizontal und vertikal zentriert werden.

Zusammenfassung der wichtigsten Punkte

Beim Zentrieren des Bildes können wir das Flex-Layout und das Positionsattribut verwenden, um dies zu erreichen. Bei Verwendung des Flex-Layouts können wir die Eigenschaften justify-content und align-items sowie die Eigenschaften flex-direction und align-self verwenden. Bei Verwendung des Positionsattributs können wir das Bild auf absolute Positionierung einstellen oder negative Ränder verwenden.

Im Allgemeinen ist die Verwendung des Flex-Layouts flexibler und einfacher, erfordert jedoch die Verwendung von CSS3 und die Verwendung des Positionsattributs ist mit älteren Browsern besser kompatibel. In praktischen Anwendungen können wir je nach Situation auswählen, welche Methode zum Zentrieren des Bildes verwendet werden soll.

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