Heim > Artikel > Web-Frontend > So zentrieren Sie CSS-Bilder
So zentrieren Sie CSS-Bilder
- php中世界最好的语言Original
- 2018-05-15 14:43:378088Durchsuche
In Projekten stoßen wir häufig auf diese Situation. Es gibt viele Möglichkeiten, das Bild in der Mitte erscheinen zu lassen, aber die am meisten empfohlene Methode ist die Verwendung von CSS zum Betreiben von DIV, daher werde ich sie Ihnen vorstellen Unten gibt es zwei Methoden: Verwenden Sie CSS-Operationen, um das Bild zu zentrieren.
Lassen Sie zunächst das DIV--Objekt im Bild innerhalb der Box horizontal zentriert sein. Dies entspricht dem gleichen CSS wie die horizontale Zentrierung der Textschrift innerhalb der DIV-Box.
CSS zum Zentrieren des Objektinhalts:
text-align :center
text-align ist die Position des Inhalts im Objekt Mittelwert ist zentriert
1. Die herkömmliche HTML-Methode zum horizontalen und horizontalen Zentrieren des Bildes besteht darin, dem Beschriftungsobjekt direkt „align="center"“ hinzuzufügen, um das Bild horizontal und horizontal im Objekt anzuzeigen horizontal zentriert. Fügen Sie „align="center"“ direkt in das Beschriftungsobjekt ein, um das Bild im Objekt horizontal und zentriert anzuzeigen.CSS, um das DIV-Objekt horizontal im Bild zu zentrieren
align="center"使用方法： <p align="center"></p> align="center"居中图片DIV+CSS实例代码： <!DOCTYPE > <html xmlns="http://www.php.cn"> <head> <meta charset="utf-8" /> <title>图片横向居中</title> </head> <body> <p align="center"><img src="http://www.php.cn" /></p> </body> </html>2. Verwenden Sie CSS-Stile, um das Bild im DIV zu zentrieren (horizontal zentriert)
HTML+CSS Der vollständige Code lautet wie folgt:
Wir können die beiden oben genannten Methoden verwenden, um zu erreichen, ob der Text zentriert ist, das Bild zentriert ist usw. Es wird jedoch allgemein empfohlen, CSS zu verwenden Für viele Webseiten müssen wir nur die CSS-Datei ändern. Entsprechend einem Selektorstil können Sie den Inhalt so ändern, dass er zentriert, links oder rechts angezeigt wird.
<!DOCTYPE >
<html xmlns="http://www.php.cn">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
<style>
.pcss5{text-align:center}
</style>
</head>
<body>
<p class="pcss5"><img src="http://www.php.cn" /></p>
</body>
</html>Empfohlene Lektüre:
CSS verwenden, um einen kreisförmigen Fortschrittsbalken zu implementieren
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie CSS-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!