Dieser Artikel stellt Ihnen hauptsächlich die spezifische Methode zur Implementierung von div zur horizontalen Zentrierung vor.
Anfänger von HTML/CSS müssen sich der verschiedenen Möglichkeiten zur Zentrierung von Divs bewusst sein (z. B. horizontale Zentrierung, vertikale Zentrierung usw.). Schließlich ist ein hervorragendes Div-Layout der Schlüssel zur Erstellung von Webseiten . Grundkomponenten.
Empfohlene Referenz: „HTML-Tutorial“
Im Folgenden stellen wir Ihnen die Methode vor, mit der Sie mit einer einfachen Methode div horizontal zentriert erreichen können Beispiel. . Die Wirkung von
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div水平居中</title>
</head>
<body>
<div style="text-align: center;margin: 0 auto;background: red;width: 100px;">
PHP中文网
</div>
</body>
</html> ist wie folgt:
Hier verwenden wir hauptsächlich das Stilattribut „text-align: center; “ und „margin: 0 auto;“. Das Attribut
text-align gibt die horizontale Ausrichtung des Textes im Element an. Der Attributwert center bedeutet, dass der Text in der Mitte angeordnet ist. Das Kurzschriftattribut
margin legt alle Randattribute in einer Deklaration fest. Der Attributwert ist 0 auto bedeutet, dass der Browser den Rand berechnet und auf 0 setzt.
Damit jeder den Unterschied zwischen Rand und Textausrichtung intuitiver und klarer versteht, zeigen wir die Rolle jedes Attributs im Detail.
1. Wir heben die Breite des Div im obigen Code auf. Der Effekt ist wie folgt:
Aus dem Bild Wir können Folgendes feststellen: Wenn wir keine Breite für das Div festlegen, aber dennoch über die Attribute text-align und margin verfügen, bleibt der Inhalt im Div immer noch horizontal zentriert.
2. Wenn wir das Text-Alignment-Attribut aufheben, ist der Effekt wie folgt:
Zu diesem Zeitpunkt ist der Text im Div Nr länger zentriert.
3. Wenn wir das Randattribut löschen, aber die Textausrichtung und -breite festlegen, ist der Effekt wie folgt:
Zu diesem Zeitpunkt können wir feststellen dass: Der Text ist zentriert, aber das Div ist nicht mehr horizontal zentriert.
Hinweis: Alle Browser unterstützen Textausrichtungs- und Randattribute.
Zusammenfassend lässt sich sagen, dass Sie die beiden Attribute „text-align: center;“ und „margin: 0 auto;“ kombinieren möchten, um die horizontale Zentrierung des angegebenen Div zu erreichen.
In diesem Artikel geht es um die spezifische Methode zur horizontalen Zentrierung von Div. Er ist sehr einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den horizontalen Zentrierungseffekt von Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
