So erzielen Sie den zentrierenden Effekt von Div-Inhalten-HTML-Kenntnisse-php.cn

Heim

tägliche Programmierung

HTML-Kenntnisse

So erzielen Sie den zentrierenden Effekt von Div-Inhalten

藏色散人

Nov 09, 2018 pm 03:53 PM

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>

Nach dem Login kopieren

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!

Erklärung dieser Website

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