Heim > Artikel > tägliche Programmierung > So erzielen Sie den zentrierenden Effekt von Div-Inhalten

So erzielen Sie den zentrierenden Effekt von Div-Inhalten

藏色散人Original: 2018-11-09 15:53:147306Durchsuche

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>

Der Front-End-Effekt ist wie folgt:

So erzielen Sie den zentrierenden Effekt von Div-Inhalten

Wie in der Abbildung gezeigt, ist der Inhalt im Div zentriert.

Hier legen wir das Attribut

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:

So erzielen Sie den zentrierenden Effekt von Div-Inhalten

Zusammenfassung der zugehörigen Eigenschaften:

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 des

Div-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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erzielen Sie den vertikalen Zentrierungseffekt von DivNächster Artikel：So erzielen Sie den vertikalen Zentrierungseffekt von Div

In Verbindung stehende Artikel

Mehr sehen