Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren-CSS-Tutorial-php.cn

Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren

php中世界最好的语言

Freigeben： 2020-09-05 11:36:05

Original

24266 Leute haben es durchsucht

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.

Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren

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>

Nach dem Login kopieren

2. Screenshot eines Div+CSS-Zentrierungsbeispiels

Screenshot der Div-CSS-Implementierung des Zentrierungseffekts

div-Implementierung Screenshot des Zentrierungseffekts

Verwenden Sie CSS, um die horizontale Zentrierung von DIV zu realisieren

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:

So konvertieren Sie HTML in eine TXT-Datei

So konvertieren Sie eine Tabelle und td Legen Sie den Hintergrund fest, um den Tabellenrand zu realisieren

So legen Sie den Tabellenrand für Tabelle und td geschickt fest

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!