So zentrieren Sie ein Bild mit CSS vertikal und horizontal

Viele Entwickler haben Probleme bei der Arbeit mit Bildern. Die Handhabung der Reaktionsfähigkeit und Ausrichtung ist besonders schwierig, insbesondere wenn ein Bild in der Mitte der Seite zentriert wird.

In diesem Beitrag werde ich einige der gebräuchlichsten Methoden zeigen, um ein Bild mithilfe verschiedener CSS-Eigenschaften sowohl vertikal als auch horizontal zu zentrieren.

Ich habe in meinem vorherigen Beitrag die Eigenschaften CSS-Position und -Anzeige durchgesehen. Wenn Sie mit diesen Eigenschaften nicht vertraut sind, empfehle ich, diese Beiträge zu lesen, bevor Sie diesen Artikel lesen.

Hier ist eine Videoversion, wenn Sie sie ausprobieren möchten:

Bild horizontal zentrieren

Beginnen wir mit der horizontalen Zentrierung eines Bildes mithilfe von 3 verschiedenen CSS-Eigenschaften.

Textausrichtung

Die erste Möglichkeit, ein Bild horizontal zu zentrieren, ist die Verwendung der text-alignEigenschaft. Jedoch nur dieses Verfahren funktioniert , wenn das Bild in einem Block-Behälter, wie eine ist :

 div { text-align: center; } 

Rand: Auto

Eine andere Möglichkeit, ein Bild zu zentrieren, ist die Verwendung der margin: autoEigenschaft (für linken und rechten Rand).

Die margin: autoalleinige Verwendung funktioniert jedoch nicht für Bilder. Wenn Sie verwenden müssen margin: auto, gibt es 2 zusätzliche Eigenschaften, die Sie ebenfalls verwenden müssen.

Die Eigenschaft margin-auto hat keine Auswirkungen auf Elemente auf Inline-Ebene. Da das Tag ein Inline-Element ist, müssen wir es zuerst in ein Element auf Blockebene konvertieren:

img { margin: auto; display: block; }

Zweitens müssen wir auch eine Breite definieren. Der linke und der rechte Rand können also den Rest des leeren Raums einnehmen und sich automatisch ausrichten, was den Trick macht (es sei denn, wir geben ihm eine Breite von 100%):

img { width: 60%; margin: auto; display: block; }

Anzeige: Flex

Die dritte Möglichkeit, ein Bild horizontal zu zentrieren, ist die Verwendung von display: flex. So wie wir die text-alignEigenschaft für einen Container verwendet haben, verwenden wir sie auch display: flexfür einen Container.

Die display: flexalleinige Verwendung reicht jedoch nicht aus. Der Container muss außerdem eine zusätzliche Eigenschaft mit dem Namen haben justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

Die justify-contentEigenschaft arbeitet mit zusammen, mit display: flexder wir das Bild horizontal zentrieren können.

Schließlich muss die Breite des Bildes kleiner sein als die Breite des Containers, da es sonst 100% des Platzes einnimmt und wir es dann nicht zentrieren können.

Wichtig: Die display: flexEigenschaft wird in älteren Browserversionen nicht unterstützt. Weitere Details finden Sie hier.

Bild vertikal zentrieren

Anzeige: Flex

Für die vertikale Ausrichtung ist die Verwendung display: flexwieder sehr hilfreich.

Stellen Sie sich einen Fall vor, in dem unser Container eine Höhe von 800 Pixel hat, die Höhe des Bildes jedoch nur 500 Pixel beträgt:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

In diesem Fall reicht es aus, dem Container eine einzelne Codezeile hinzuzufügen align-items: center:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Die align-itemsEigenschaft kann Elemente vertikal positionieren, wenn sie zusammen mit verwendet wird display: flex.

Position: Absolute & Transformationseigenschaften

Eine andere Methode zur vertikalen Ausrichtung besteht darin, die Eigenschaften positionund transformzusammen zu verwenden. Dieser ist etwas kompliziert, also machen wir es Schritt für Schritt.

Schritt 1: Position Absolut definieren

Zum einen haben wir die Positionierung Verhalten des Bildes ändern von staticzu absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Außerdem sollte es sich in einem relativ positionierten Container befinden, also fügen wir position: relativeseinen Container div hinzu.

Schritt 2: Definieren Sie die Eigenschaften oben und links

Zweitens definieren wir die oberen und linken Eigenschaften für das Bild und setzen sie auf 50%. Dadurch wird der Startpunkt (oben links) des Bildes in die Mitte des Containers verschoben:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Schritt 3: Definieren Sie die Transformationseigenschaft

Im zweiten Schritt wurde das Bild jedoch teilweise aus dem Container verschoben. Also müssen wir es wieder hineinbringen.

Das Definieren einer transformEigenschaft und das Hinzufügen von -50% zu ihrer X- und Y-Achse reicht aus:

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

Es gibt andere Möglichkeiten, Dinge horizontal und vertikal zu zentrieren, aber ich habe die häufigsten erklärt. Ich hoffe, dieser Beitrag hat Ihnen geholfen zu verstehen, wie Sie Ihre Bilder in der Mitte der Seite ausrichten.

Wenn Sie mehr über Webentwicklung erfahren möchten, besuchen Sie meinen Youtube-Kanal, um weitere Informationen zu erhalten.

Danke fürs Lesen!