Die Eigenschaft „margin: 0 auto“ ist eine häufig verwendete CSS-Eigenschaft, die es Entwicklern ermöglicht, Elemente innerhalb eines Containers horizontal zu zentrieren. Der Wert „auto“ des Randattributs ermöglicht die Erzielung des Zentrierungseffekts.
In diesem Artikel werden wir untersuchen, wie der Wert „auto“ im Randattribut funktioniert und wie man ihn verwendet, um eine horizontale Zentrierung zu erreichen. Wir besprechen außerdem einige mögliche Fehler und Best Practices bei der Verwendung des Werts „auto“ in Margin-Eigenschaften.
Bevor wir dieses Thema betreten, sollten wir versuchen, uns einige Grundkenntnisse anzueignen, um dieses Problem zu verstehen. Zuerst lernen wir, was Marge in CSS bedeutet, und dann gehen wir zum Verständnis des Auto-Attributs über. Erst wenn wir das alles gelernt haben, können wir zur Antwort auf unsere ursprüngliche Frage gelangen.
Wir wissen, dass der Zweck von CSS darin besteht, eine Webseite so zu gestalten, dass sie benutzerfreundlich und optisch ansprechend ist, wodurch das Benutzererlebnis insgesamt reibungsloser und besser für den Benutzer wird. Dieser Stil umfasst viele Dinge wie Farbe, Schriftart, Schriftgröße usw. Eine der Styling-Methoden besteht darin, einen angemessenen Abstand zwischen den Elementen zu verwenden.
Wenn wir über den Raum außerhalb der definierten Grenzen eines Elements sprechen, sprechen wir eigentlich über seine Ränder. Mit Rändern können wir einen unsichtbaren Rand erstellen, der ein Element von anderen Elementen isoliert. Es ist ein bisschen wie Polsterung, aber Polsterung ist eigentlich der Abstand zwischen den untergeordneten Elementen eines Elements und den umgebenden Elementen.
CSS ermöglicht uns ein sehr hohes Maß an Kontrolle und Anpassung über die Ränder unserer Elemente. Wir können „margin“ normalerweise verwenden, um einen Rand zu erstellen, bei dem alle vier Seiten gleich sind, aber wir können dies auch tun, indem wir einen von uns festgelegten Rand angeben referenzieren tatsächlich. Definieren Sie die Ränder für bestimmte Seiten individuell. Zum Beispiel
margin : 0 // statement 1 margin top : 25px // statement 2
Der durch Anweisung 1 festgelegte Rand setzt alle Ränder des Elements auf 0, während der durch Anweisung 2 festgelegte Rand nur den oberen Rand ändert und ihn auf 25 Pixel setzt.
Wir können Ränder auf unterschiedliche Weise festlegen -
Wir können benutzerdefinierte Längen verwenden.
Wir können einen Prozentwert angeben, der sich je nach Bildschirmgröße des Benutzers ändert.
Wir können Ränder auch vererbbar machen, wodurch die Ränder des aktuellen Elements auf die Ränder seines übergeordneten Elements gesetzt werden.
Aber was ist, wenn wir nicht wissen, welchen Wert wir bei der Definition der Margen verwenden sollen?
CSS stellt uns ein Attribut zur Verfügung, damit der Browser den Rand des Elements berechnen und festlegen kann, bei dem es sich um das automatische Attribut handelt. Diese Eigenschaft erleichtert Entwicklern die Verwendung von Margen, da wir den tatsächlichen Wert, der verwendet wird, nicht im Voraus kennen müssen, sondern ihn vom Browser berechnen lassen müssen.
Lassen Sie uns zunächst verstehen, wie es funktioniert. Wenn wir die Ränder eines Elements als „Auto“ angeben, werden auf allen Seiten gleiche Ränder erzielt, indem zunächst die Breite und Größe des Elements berechnet wird.
Die chinesische Übersetzung vonBetrachten wir ein Div mit den Abmessungen 500 x 300 Pixel. Wenn wir keine Ränder angeben, wird es automatisch an der oberen linken Ecke des Bildschirms ausgerichtet. Wenn Sie hingegen „margins“ auf „auto“ festlegen, wird es innerhalb des übergeordneten Containers, in diesem Fall des Body-Tags, zentriert.
<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: aqua;">No set margin</div> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: auto;">Margin set to 0</div> </body> </html>
Was passiert nun, wenn wir versuchen, die Marge mithilfe von zwei Werten festzulegen? Immer wenn wir versuchen, Ränder zu verwenden und zwei Werte bereitzustellen, wird der erste Wert als Wert für den oberen und unteren Rand betrachtet, während der zweite Wert für den linken und rechten Rand verwendet wird.
Unsere Frage besteht darin, zu erklären: „Wie funktioniert es, wenn wir das Auto-Attribut als zweiten Wert der Marge verwenden?“
Die Antwort lautet:„Das Element wird vertikal an der Mitte seines übergeordneten Elements ausgerichtet, indem der linke und rechte Rand automatisch berechnet werden.“ Die chinesische Übersetzung von Beispiel lautet:
Beispiel<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: 0 auto;">Margin set to 0 auto</div> </body> </html>
In diesem Artikel haben wir etwas über die Bedeutung von
Das obige ist der detaillierte Inhalt vonWie funktioniert das Auto-Attribut in „margin: 0 auto' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen vivox100s und x100
Was sind die häufig verwendeten Funktionen von Informix?
Ethereum-Browser fragt digitale Währung ab
Was ist eine Bitcoin-Wallet?
Der spezifische Prozess der Verbindung zu WLAN im Win7-System
Wozu dient das Docker-Image?
So installieren Sie ein Linux-System
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
