Heim > Artikel > Web-Frontend > So verwenden Sie CSS zum Zentrieren eines DIV

So verwenden Sie CSS zum Zentrieren eines DIV

php中世界最好的语言Original: 2017-11-20 11:07:522937Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-Wasserwellen-Button-SpezialeffektNächster Artikel：CSS-Wasserwellen-Button-Spezialeffekt

In Verbindung stehende Artikel

Mehr sehen