Wie man ein Bild in CSS3 zentriert - dummies

Eine der am häufigsten gestellten Fragen zu CSS3 ist, wie man ein Bild auf der Seite zentriert. Leider wird in den meisten Antworten, die Sie erhalten, nur das

-Tag besprochen, ohne zu zeigen, wie ein Container zentriert wird. Die Verwendung eines Containers ist wichtig, da Sie später möglicherweise weitere Elemente zu diesem Bild hinzufügen möchten. Im folgenden Verfahren wird beschrieben, wie Sie das Bild zentrieren.

1. Öffnen Sie die SimpleGraphics. CSS-Datei und fügen Sie den folgenden Stil hinzu.

   #ImageContainer img {Höhe: 400px; Breite: 400px; margin: 0px;}
   

   Der Zweck dieses Stils besteht darin, ein Bild mit einer bestimmten Größe zu erstellen. Es gibt verschiedene Möglichkeiten, Bilder unterschiedlicher Größe zu bearbeiten. Das ist einer von ihnen. Es funktioniert gut, wenn die meisten Ihrer Bilder ungefähr die gleiche Größe haben.

   In einigen Fällen, z. B. beim Zentrieren von Bildern mit sehr unterschiedlichen Größen, müssen Sie JavaScript verwenden. Um ein Bild in der Mitte der Seite zu platzieren, müssen Sie die Größe des Bildes kennen. Viele Bibliotheken von Drittanbietern machen es Ihnen leicht, Bilder auf dem Bildschirm zu zentrieren - die CSS-only-Technik hat Grenzen.

2. Fügen Sie dem #ImageContainer-Stil den folgenden Code hinzu.

   Position: absolut; Höhe: 400px; Breite: 400px; links: 50%; Rand links: -205px;
   

   Dieser Code legt die Position als absolut fest und gibt ihm die gleiche Größe wie das Bild, sodass die Tags

   und
   verknüpft sind. Dann wird die linke Seite der 50% über die Seite gelegt, so dass unabhängig davon, wie der Benutzer das Browserfenster ändert, die linke Seite der Mitte bleiben wird.

3. Natürlich möchten Sie nicht die linke Seite der Mitte zentrieren - Sie möchten das Bild zentrieren. Die Rand-Links-Einstellung verschiebt den linken Rand um 205 Pixel nach links (die Hälfte der Gesamtgröße des Bildes plus die Auffüllung), sodass sich die Mitte des Bildes jetzt in der Mitte der Seite befindet.

   Speichern Sie die CSS-Datei und laden Sie die Seite neu.

   

Sie sehen das Bild und seinen Rahmen auf der Seite zentriert.