So zentrieren Sie das Bild in CSS

So zentrieren Sie das Bild in CSS: 1. Verwenden Sie den Stil „margin:0 auto“ oder „text-align:center“, um das Bild horizontal zu zentrieren. 2. Verwenden Sie „height == row height“, um das Bild vertikal zu zentrieren 3. Verwenden Sie den Tisch, um die vertikale Zentrierung des Bildes zu realisieren. 4. Verwenden Sie die absolute Positionierung, um die vertikale Zentrierung des Bildes zu realisieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

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 auf der Seite Die Webseite „Wie man CSS zur Zentrierung verwendet“ kann eine Referenz für Freunde in Not sein.

Die 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 das horizontale Zentrierungsattribut text-align: center of the text, um eine horizontale Zentrierung des Bildes zu erreichen )

2. Lass es uns tun. Schauen Sie sich die Implementierungsmethode der vertikalen Zentrierung von CSS-Bildern an Der Code für die vertikale Zentrierung lautet wie folgt:

<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>

Hinweis: Diese Methode muss beachtet werden. Kann nur in der Höhe verwendet werden. 2. Verwenden Sie eine Tabelle, um eine vertikale Zentrierung von Bildern zu erreichen. table hier ; und display: table-cell; Diese Methode ist nicht mit IE67 kompatibel. Wenn Sie IE67 nicht unterstützen müssen, können Sie

verwenden Nachteil: Wenn Sie die Anzeige einstellen, ändert sich möglicherweise Ihr ursprüngliches Layout.

3. Verwenden Sie die absolute Positionierung, um eine vertikale Zentrierung von Bildern zu erreichen Das Bild ist bekannt. Breite und Höhe können auf diese Weise verwendet werden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos! !

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Bild in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!