Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren
Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren
- php中世界最好的语言Original
- 2017-11-21 09:46:5424211Durchsuche
So legen Sie die Zentrierung von div mit CSS fest: Legen Sie zuerst „text-align:center“ für den Text fest und setzen Sie dann den CSS-Stil des div-Felds, das zentriert werden muss, auf „margin:0 auto“. um das entsprechende Div horizontal zu zentrieren.
Wie verwende ich CSS, um ein DIV zu zentrieren? Ich habe einen für jedermann leicht verständlichen Code erstellt und mithilfe von CSS realisiert, dass Freunde in Not darauf in der horizontalen Mitte angezeigt werden können.
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.
Div-Zentrierungscodeanwendung: Um den Div-Zentrierungseffekt zu beobachten, legen wir ein Div mit dem Namen „.div“ für das Div fest. Verwenden Sie class="div" im div-Tag im HTML und legen Sie es fest Breite bis 400 Pixel; Höhe bis 100 Pixel mit rotem Rand. Damit wir den Effekt beobachten können.
1. Vollständiger HTML+CSS-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></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>2. Screenshot eines Div+CSS-Zentrierungsbeispiels
Screenshot der Div-CSS-Implementierung des Zentrierungseffekts
div-Implementierung Screenshot des Zentrierungseffekts
3. Anwendungsmerkmale des Div-Zentrierungscodes
Diese Zentrierungsmethode macht den Div-Zentrierungseffekt perfekt kompatibel mit allen wichtigen Plattformen und Browser sind mit immer höheren IE-Versionen kompatibel.
So verwenden Sie CSS, um eine horizontale Zentrierung von DIV zu erreichen.
Verwandte Lektüre:
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!