Beim Layout einer Webseite kann die Position des Bildes manchmal die Schönheit der gesamten Seite beeinflussen, daher muss die Platzierung des Bildes geändert werden. Im folgenden Artikel erfahren Sie mehr über die Platzierung von Bildern. Die Verwendung von CSS zur Zentrierung von Webseiten kann als Referenz für Freunde in Not dienen.
CSS-Bildzentrierung kann in zwei Situationen unterteilt werden: horizontale Zentrierung und vertikale Zentrierung von CSS-Bildern. Schauen wir uns also die Implementierungsmethoden dieser Bildzentrierung an.
1. Schauen wir uns zunächst die Methode zur horizontalen Zentrierung von CSS-Bildern an
1. Verwenden Sie margin: 0 auto, um eine horizontale Zentrierung von Bildern zu erreichen
Css-Bild-Horizontalzentrierungscode:
<div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin: 0 auto;" /> </div>
2. Verwenden Sie die horizontale Zentrierungseigenschaft des Textes text-align: center, um eine horizontale Zentrierung des Bildes zu erreichen
Code für die horizontale Zentrierung von CSS-Bildern:
<div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" /> </div>
2. Schauen wir uns an, wie die vertikale Zentrierung von CSS-Bildern implementiert wird
1. Verwenden Sie height == row height, um zu erreichen, dass das Bild vertikal zentriert ist.
Der vertikale Zentrierungscode für CSS-Bilder lautet wie folgt:
<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block; vertical-align: middle;" /> </div>
Hinweis: Diese Methode muss Geben Sie die Höhe an, bevor Sie es verwenden können.
2. Verwenden Sie die Tabelle, um eine vertikale Zentrierung von Bildern zu erreichen
Der CSS-Bildzentrierungscode lautet wie folgt:
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;"> <span style="display: table-cell; vertical-align: middle; "> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" /> </span> </div>
Hinweis: Bei dieser Methode wird das vertikale Zentrierungsattribut der Tabelle verwendet.
Hinweis: display: table; display: table-cell wird hier zur Simulation der Tabelle verwendet /IE7 und IE67 unterstützen display: table nicht. Wenn Sie IE67 nicht unterstützen müssen, können Sie
verwenden. Diese Methode hat einen Nachteil: Wenn Sie display: table festlegen, ändert sich möglicherweise Ihr ursprüngliches Layout
3. Verwenden Sie die absolute Positionierung, um eine vertikale Zentrierung von Bildern zu erreichen
Der vertikale CSS-Bildzentrierungscode lautet wie folgt:
<div style="width: 500px;height:200px; position: relative; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /> </div>
Hinweis: Diese Methode kann verwendet werden, wenn Breite und Höhe des Bildes bekannt sind.
Dieser Artikel endet hier. Einzelheiten zu den oben genannten Attributen finden Sie im CSS-Benutzerhandbuch.
Das obige ist der detaillierte Inhalt vonWie zentriere ich das Bild in CSS? Zusammenfassung der Methoden zum Zentrieren von CSS-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
