So zentrieren Sie ein Div in HTML-HTML-Tutorial-php.cn

So zentrieren Sie ein Div in HTML

清浅

Freigeben： 2019-04-10 16:27:16

Original

23324 Leute haben es durchsucht

Zu den Methoden zum Zentrieren eines Div in HTML gehören: Die Margin-Methode setzt den linken Rand und den oberen Rand des Rands auf den Wert des übergeordneten Elements abzüglich des untergeordneten Elements und dividiert ihn dann zusätzlich durch 2, um das Div zu zentrieren , die Positionsmethode kann auch das Div zentrieren

Beim Layouten der Seite wird oft der Hauptteil der Webseite auf der Seite zentriert. Dies erfordert, dass wir eine horizontale Zentrierung des Div erreichen Ich werde im Artikel ausführlich vorstellen, wie man das Div auf der Seite zentriert. Es hat einen gewissen Referenzwert und ich hoffe, dass es für alle hilfreich sein wird

So zentrieren Sie ein Div in HTML

[Empfohlen Kurs: HTML-Tutorial]

Margin-Methode

Sie können den Rand verwenden, um den Wert zu zentrieren margin-left ist die Breite des übergeordneten Elements minus der Breite des untergeordneten Elements und wird dann durch 2 geteilt (In diesem Beispiel: (400-100)/2=150px). Der Wert von margin-top ist die Höhe des übergeordneten Elements Element minus der Höhe des untergeordneten Elements geteilt durch 2 (in diesem Beispiel: (300-100)/2= 100px)

Beispiel:

<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

Nach dem Login kopieren

Rendering:

So zentrieren Sie ein Div in HTML

Positionsmethode

Sie können die Positionierung verwenden, um das Div vertikal zu zentrieren. Wir können die absolute Positionierung des Unterelements festlegen und festlegen Die oberen und linken Werte müssen jedoch auf 50 % festgelegt werden. Beachten Sie jedoch, dass Sie bei der Verwendung der Positionierung auch den Randwert festlegen müssen, wobei die Werte von margin-left und margin-right alle negativ sind Die Größe des Werts beträgt die Hälfte der Breite und Höhe des untergeordneten Elements

Beispiel:

<style>
	.box{
	     width:400px;
	     height: 300px;
	     border: 1px solid #ccc;
	     position: relative;
	}
	.box1{
		width:100px;
		height: 100px;
		background-color: pink;
		position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px 		
		}
	</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

Nach dem Login kopieren

Rendering:

So zentrieren Sie ein Div in HTML

Referenz für diesen Artikel: https://www.html.cn/doc/html/layout/

HTML-Tag Index: https://www.html.cn/sitemap.html

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel kann jedem helfen, zu lernen, wie man ein Div zentriert die Seite

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Div in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!