So zentrieren Sie ein Div in HTML
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
[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>Rendering:
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>Rendering:
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Detaillierte Erläuterung der CSS-Rahmeneigenschaften: Polsterung, Rand und Rand
Oct 21, 2023 am 11:07 AM
CSS-Rahmeneigenschaften im Detail erklärt: Padding, Margin und BorderCSS ist eine Stylesheet-Sprache, die zur Steuerung und Gestaltung von Webseitenelementen verwendet wird. Im Webdesign ist das Randattribut einer der wichtigsten Teile. In diesem Artikel wird die Verwendung des Border-Attributs in CSS ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt. padding Mit der padding-Eigenschaft wird der Abstand eines Elements festgelegt, also der Abstand zwischen dem Inhalt des Elements und den Rändern des Elements. Wir können die Auffüllung mit positiven Zahlen oder Prozentwerten festlegen
Was bedeutet Marge in CSS?
Dec 18, 2023 am 10:30 AM
In CSS ist margin eine Eigenschaft, mit der die äußeren Ränder eines Elements festgelegt werden. Ränder sind der Abstand zwischen dem Rand eines Elements und seinem Inhalt. Der Rand kann die folgenden Werte annehmen: 1. Ein einzelner Wert: zum Beispiel Rand: 10 Pixel; alle vier Ränder (oben, rechts, unten, links) auf 10 Pixel festlegen. 2. Zwei Werte: zum Beispiel Rand: 10 Pixel; Legen Sie den oberen und unteren Rand auf 10 Pixel und den linken und rechten Rand auf 20 Pixel fest.
Wie zentriere ich ein Div in einem anderen Div?
Sep 08, 2023 am 11:13 AM
Einführung Die zentrale Ausrichtung von Divs ist einer der wichtigsten Aspekte der Front-End-Entwicklung. In diesem Artikel werden wir uns mit der Technik befassen, mit der mithilfe von HTML und CSS ein Div in einem anderen Div platziert wird. In diesem Tutorial werden wir ein übergeordnetes Div haben, das untergeordnete Divs haben sollte. Unsere Aufgabe besteht darin, das untergeordnete Div in der Mitte des übergeordneten Div zu platzieren. Die Verwendung der Transform-Übersetzung und der Positionssyntax ist keine sehr beliebte Methode, um ein Div in einem anderen Div zentriert auszurichten. Syntax left:50%;top:50%;Transform:translate(-50%,-50%);above Die Syntax erledigt das folgende - Die CSS-Regel „left:50%;“ legt die horizontale Position des Elements fest
Detaillierte Erläuterung der CSS-Textlayouteigenschaften: Textüberlauf und Leerraum
Oct 20, 2023 am 11:19 AM
Detaillierte Erläuterung der CSS-Textlayouteigenschaften: Textüberlauf und Leerraum Im Webdesign ist das Textlayout ein sehr wichtiger Link. Ein angemessenes Layout kann den Text lesbarer und schöner machen. CSS bietet mehrere Eigenschaften, um zu steuern, wie Text angezeigt wird, einschließlich Textüberlauf und Leerraum. In diesem Artikel werden die Verwendung und der Beispielcode dieser beiden Eigenschaften detailliert beschrieben. 1. Textüberlauf-Attributtext
Was bedeutet Rand in HTML?
Sep 13, 2021 pm 04:26 PM
In HTML bedeutet „Rand“ „äußerer Rand“, was sich auf den leeren Bereich um den Rand eines Elements bezieht. Um Ränder festzulegen, müssen Sie die CSS-Margin-Eigenschaft verwenden, die jede Längeneinheit, jeden Prozentwert und sogar einen negativen Wert akzeptiert.
Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente
Feb 18, 2024 pm 04:36 PM
Die Auswirkung des Randes auf Inline-Elemente unterscheidet sich von der auf Elemente auf Blockebene. In Inline-Elementen wirkt sich das Randattribut nur auf die vertikalen oberen und unteren Ränder aus, nicht auf die horizontalen linken und rechten Ränder. Wenn es beispielsweise in HTML ein Absatzelement gibt, können wir einige Stile dafür festlegen und die Auswirkung des Randattributs darauf beobachten. Der HTML-Code sieht so aus:
Was bedeutet CSS-Dateirand?
Jan 30, 2023 am 09:34 AM
Der CSS-Dateirand ist ein CSS-Attribut, das zum Definieren des Abstands um das Element verwendet wird. Der Rand stellt den äußeren Rand des Elements dar. Sie können den oberen, unteren, linken und rechten Rand des Elements einzeln ändern Das Margin-Attribut akzeptiert jede Längeneinheit, Prozentwerte oder sogar negative Werte.
Erkunden der Eigenschaften des CSS-Boxmodells: Innenabstand, Rand und Rand
Oct 20, 2023 pm 03:09 PM
Erkundung der Eigenschaften des CSS-Boxmodells: Abstand, Rand und Rahmen. Das CSS-Boxmodell ist eines der wichtigen Konzepte im Webseitenlayout. Bei der Frontend-Entwicklung ist das Verständnis und die korrekte Verwendung der Padding-, Margin- und Border-Attribute von entscheidender Bedeutung. Dieser Artikel befasst sich mit der Verwendung und Korrelation dieser drei Eigenschaften und stellt spezifische Codebeispiele bereit. 1. Einführung in das Boxmodell Das Boxmodell besteht aus vier Teilen: Inhalt, Polsterung, Bo
