So verwenden Sie CSS zum Zentrieren eines DIV-CSS-Tutorial-php.cn

So verwenden Sie CSS zum Zentrieren eines DIV

php中世界最好的语言

Freigeben： 2017-11-20 11:07:52

Original

2888 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!