Dieser Artikel stellt Ihnen hauptsächlich den Effekt der Zentrierung des Div-Inhalts vor, was bedeutet, dass der Div-Inhalt nach oben, unten, links und rechts zentriert wird.
Ich glaube, jeder kennt den Effekt der Zentrierung von Div-Inhalten, wie zum Beispiel unserer gemeinsamen Website-Navigationsleiste. Nun, im vorherigen Artikel habe ich Ihnen die Implementierungsmethoden von horizontal zentriertem Div und vertikal zentriertem Div vorgestellt.
Empfohlene Lernreferenz: „HTML-Tutorial“
Im Folgenden erfahren Sie weiterhin, wie Sie den Effekt der Div-Zentrierung.
Der Code zum Zentrieren von Div-Inhalten lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px; background: red;">
PHP中文网
</div>
</body>
</html>
line-height fest, um sicherzustellen, dass der Inhalt vertikal zentriert ist, und legen das Attribut text-align: center; fest, um sicherzustellen, dass der div-Inhalt ist horizontal zentriert.
Das Attribut „margin: 0 auto;“ ist so eingestellt, dass das Div horizontal und zentriert auf der Browserseite angezeigt werden kann. Wenn der Rand nicht festgelegt ist, muss der Div-Inhalt natürlich nicht festgelegt werden wird weiterhin in der Mitte angezeigt, wie in der Abbildung unten gezeigt:
line-. Die Eigenschaft height legt den Abstand zwischen Zeilen (Zeilenhöhe) fest.
text-align Das -Attribut gibt die horizontale Ausrichtung des Texts im Element an, und „center“ bedeutet, den Text in der Mitte anzuordnen.
In diesem Artikel geht es um die Implementierungsmethode desDiv-Inhaltszentrierungseffekts. Er ist sehr einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde hilfreich sein, die ihn benötigen.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den zentrierenden Effekt von Div-Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
