Ein Bild zentrieren in CSS

1. Verwenden Sie die Eigenschaften display und margin, um ein Bild in CSS zu zentrieren
2. Verwenden Sie die Eigenschaft text-align, um ein Bild in CSS zu zentrieren
3. Verwenden Sie die CSS-Eigenschaft flexbox, um ein Bild zu zentrieren

In diesem Artikel stellen wir drei Methoden vor, um ein Bild in HTML mit Hilfe von CSS zu zentrieren.

Verwenden Sie die Eigenschaften display und margin, um ein Bild in CSS zu zentrieren

Wir können die CSS-Eigenschaften display und margin zusammen verwenden, um ein Bild zu zentrieren. Die Eigenschaft display des Bildes ist zunächst inline. Daher können wir mehrere Bilder in einer Zeile hinzufügen. Wenn wir beispielsweise den folgenden Code schreiben, können wir zwei Bilder hintereinander sehen.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

Daher müssen wir die Eigenschaft display des Bildes auf blockieren ändern, damit nur ein Bild in einer Zeile platziert wird. Dann können wir dem Bild margin von 0px auto geben, um es zu zentrieren. Das Bild hat oben und unten einen Rand von 0px. Der erste Wert kann eine beliebige Zahl sein, der zweite Wert muss jedoch auto sein. Das auto gibt dem Bild einen Rand, der es genau in die Mitte setzt. Dieser Vorgang funktioniert nur, wenn wir nur ein Bild in einer Reihe zentrieren müssen.

Erstellen Sie beispielsweise ein HTML-Dokument und platzieren Sie ein Bild mit dem Tag img. Schreiben Sie den Wert src richtig und schreiben Sie ein alt, um das Bild aussagekräftig zu machen, wenn das Bild aus irgendeinem Grund nicht angezeigt wird. Verwenden Sie das Platzhalterbild https://loremflickr.com/320/240 im Attribut src. Setzen Sie in CSS die Eigenschaft display auf block und geben Sie ihr margin von 0px auto. Der erste Wert von margin wird gemäss unseren Vorgaben auf eine beliebige Zahl gesetzt.

Das folgende Beispiel zeigt, dass das Bild zentriert ist, wenn wir den Wert display auf block setzen und ihm einen margin von 0px auto geben.

Beispielcode:

<img src="/img/DelftStack/logo.png" alt="Logo" />

img{
 display: block;
 margin: 0px auto;
}

Verwenden Sie die Eigenschaft text-align, um ein Bild in CSS zu zentrieren

Wir können die CSS-Eigenschaft text-align verwenden, um ein Bild zu zentrieren. Wir können ein Bild in ein div packen und die text-align-Eigenschaft auf center setzen, dann wird das Bild zentriert. Diese Methode kann mehrere Bilder in einer Zeile zentrieren, im Gegensatz zur vorherigen Methode, bei der nur ein Bild zentriert wurde. Wir können diese Methode sowohl für einzelne als auch für mehrere Bilder verwenden.

Erstellen Sie beispielsweise ein div und geben Sie ihm die Klasse parent. Verwenden Sie dann innerhalb des div das img-Tag, um ein Bild hochzuladen. Setzen Sie src auf https://loremflickr.com/320/240 und alt auf cat. Wählen Sie in CSS das div mit seinem Klassennamen aus, d. h. .parent und setzen Sie seine text-align-Eigenschaft auf center.

Das folgende Beispiel zeigt, dass das Bild innerhalb des div zentriert ist, wenn wir die CSS-Eigenschaft text-align von div auf center setzen.

Beispielcode:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

Verwenden Sie die CSS-Eigenschaft flexbox, um ein Bild zu zentrieren

Flexbox ist eine der am weitesten verbreiteten CSS-Technologien. Die Grundidee von flexbox ist es, dem Container die Möglichkeit zu geben, seine Artikel zu verändern. Wir können die flexbox-Eigenschaften innerhalb eines Containers verwenden, indem wir die display-Eigenschaft auf flex setzen. Dann können wir die Eigenschaft justify-content: center verwenden, um die Elemente oder Bilder innerhalb des Containers horizontal zu zentrieren. Wir können die Eigenschaft align-items auf center setzen, um die Elemente vertikal zu zentrieren.

Erstellen Sie beispielsweise ein div und geben Sie ihm den Klassennamen container. Platzieren Sie dann ein Bild innerhalb des div mit dem img-Tag mit src und alt. Wählen Sie das div mit seinem Klassennamen aus, z. B. .container und setzen Sie seine display-Eigenschaft auf flex. Setzen Sie dann die Eigenschaft justify-content flexbox auf center.

Das folgende Beispiel zeigt, dass das Bild innerhalb des div durch die Verwendung von flexbox-Eigenschaften zentriert wird.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}