Wie man ein Bild in CSS3 zum Zentrum

Eine der am häufigsten gestellten Fragen zu CSS3 ist, wie auf der Seite ein Bild zu zentrieren. Leider sind die meisten der Antworten erhalten Sie diskutieren nur die Tag, ohne zu zeigen, wie man einen Behälter zu zentrieren. einen Behälter zu verwenden ist wichtig, weil Sie später andere Artikel zu diesem Bild hinzufügen möchten. Das folgende Verfahren zeigt, wie das Bild zu zentrieren.

1. Öffne das SimpleGraphics.CSS Datei und fügen Sie den folgenden Stil.

   #ImageContainer Img {height: 400px; width: 400px; margin: 0px;}

   Der Zweck dieser Art ist ein Bild einer spezifischen Größe zu erstellen. Es gibt eine Reihe von Möglichkeiten, mit Bildern von verschiedenen Größen zu bewältigen. Dies ist einer von ihnen. Es funktioniert gut, wenn die meisten Ihrer Bilder über die gleiche Größe haben.

   In einigen Fällen, wie zum Beispiel, wenn Sie Bilder von sehr unterschiedlichen Größen sind Zentrierung, müssen Sie mit Hilfe von javascript zurückgreifen. 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 zum Zentrum Bildschirm - die CSS-Technik nur Grenzen hat.

2. Fügen Sie den folgenden Code in die #ImageContainer Stil.

   position: absolute-height: 400px; width: 400px; links: 50% -margin-left: -205px;

   Dieser Code setzt die

   Position als absolute und gibt es die gleiche Größe wie das Bild, so dass der
   und Tags sind miteinander verbunden. Sie stellt dann die linke Seite des
   50% über die Seite, so dass unabhängig davon, wie der Benutzer das Browserfenster ändert, auf der linken Seite des
   bleiben Mitte.

   Natürlich wollen Sie nicht auf der linken Seite des zum Zentrum

   - Sie wollen das Bild zu zentrieren. Die margin-left Einstellung bewegt sich der linke Rand 205 Pixel auf der linken Seite (die Hälfte der Gesamtgröße des Bildes, sowie die Polsterung), so dass die Mitte des Bildes nun in der Mitte der Seite.

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

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