Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie CSS zum Zentrieren eines DIV
So verwenden Sie CSS zum Zentrieren eines DIV
- php中世界最好的语言Original
- 2017-11-20 11:07:522994Durchsuche
Der Code, den ich Ihnen heute zur Verfügung gestellt habe, ist das, was viele Freunde verwenden müssen, um DIV-Zentrierung zu erreichen. Es wird für Sie praktisch sein, ihn in Zukunft zu verwenden CSS, um eine DIV-Zentrierung zu erreichen. Dieses Mal werde ich Ihnen einen Code beibringen, der relativ einfach und gut kompatibel ist.
erfordert zwei Haupt-CSS-Codes, einer ist text-align:center (Inhalt ist zentriert), der andere ist margin:0 auto, die anderen beiden Stile benötigen zusammen verwendet werden, um ein zentriertes Anzeigelayout der Div-Box zu erreichen.
Zuerst setzen wir text-align:center auf den Körper und dann den CSS-Stil margin:0 auto auf das Div-Feld, das zentriert werden muss, damit das entsprechende Div horizontal zentriert werden kann.
Erklärung mit BeispielenDie Anwendung des Div-Zentrierungscodes Um den Div-Zentrierungseffekt zu beobachten, legen wir ein Div mit dem Namen „.div“ für das Div fest und verwenden class="div" Setzen Sie im div-Tag im HTML die Breite auf 400 Pixel, die Höhe auf 100 Pixel und den Rand auf Rot. Damit wir den Effekt beobachten können.
1. Vollständiger HTML+CSS-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div居中 在线演示 www.divcss5.com</title>
<style>
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<div class="div">
DIVCSS5实例
</div>
</body>
</html> Anwendungsfunktionen des Div-Zentrierungscodes
Diese Zentrierungsmethode macht den Div-Zentrierungseffekt perfekt kompatibel mit allen wichtigen Plattformen und alle gängigen Browser, unabhängig von der IE-Hochversion oder der IE-Hochversion, sind kompatibel.
Im Folgenden erfahren Sie, wie Sie mit CSS ein DIV zentrieren. Haben Sie es gelernt?
Verwandte Empfehlungen:
CSS-Wasserwellen-Schaltflächeneffekt
CSS3-Tipps zum Zeichnen verschiedener grundlegender Grafiken
So zeichnen Sie Dreiecke und Parallelogramme mit CSS
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Zentrieren eines DIV. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!