Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zentriere ich das Bild in CSS? Zusammenfassung der Methoden zum Zentrieren von CSS-Bildern

不言
Freigeben: 2018-09-19 12:00:15
Original
41412 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!