So zentrieren Sie CSS-Bilder-HTML-Tutorial-php.cn

So zentrieren Sie CSS-Bilder

php中世界最好的语言

Freigeben： 2018-05-15 14:43:37

Original

8136 Leute haben es durchsucht

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

Nach dem Login kopieren

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="//m.sbmmt.com"> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
</head> 
<body> 
<p align="center"><img src="//m.sbmmt.com" /></p> 
</body> 
</html>

Nach dem Login kopieren

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="//m.sbmmt.com"> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
<style> 
.pcss5{text-align:center} 
</style> 
</head> 
<body> 
<p class="pcss5"><img src="//m.sbmmt.com" /></p> 
</body> 
</html>

Nach dem Login kopieren

Empfohlene Lektüre:

CSS verwenden, um einen kreisförmigen Fortschrittsbalken zu implementieren

CSS-Ripple-Animation

Was soll ich tun, wenn die Webseite iframed ist?

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!