Heim > Artikel > Web-Frontend > So zentrieren Sie Text in div in CSS
So zentrieren Sie Text in div in CSS
- 藏色散人Original
- 2021-02-05 09:19:557525Durchsuche
So implementieren Sie Text, der in der Mitte eines Div angezeigt wird, in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann den Div-Text im Textkörper hinzu befindet sich, um den chinesischen Text im div zu zentrieren.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5 und CSS3, Dell G3-Computer.
Sie können den chinesischen Text im Div so einstellen, dass er zentriert wird, indem Sie dem Div, in dem sich der Text befindet, den Stil „text-align:center“ hinzufügen. Das Attribut
text-align gibt die horizontale Ausrichtung von Text innerhalb eines Elements an.
Dieses Attribut legt die horizontale Ausrichtung von Text innerhalb von Elementen auf Blockebene fest, indem es den Punkt angibt, an dem das Linienfeld ausgerichtet wird. Der Wert justify wird dadurch unterstützt, dass Benutzeragenten den Abstand zwischen Buchstaben und Wörtern im Zeileninhalt anpassen können. Verschiedene Benutzeragenten können zu unterschiedlichen Ergebnissen führen.
Attributwert:
left Ordnet den Text links an. Standard: Wird vom Browser bestimmt.
rechts Ordnen Sie den Text rechts an.
Mitte Ordnen Sie den Text zentriert an.
justify erzielt den Effekt, den Text an beiden Enden auszurichten.
inherit gibt an, dass der Wert des text-align-Attributs vom übergeordneten Element geerbt werden soll.
Empfohlen: „CSS-Video-Tutorial“
Beispiel:
<html>
<head>
<style type="text/css">
div {
width: 200px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
示例文字
</div>
</body>
</html>Der Effekt ist wie folgt:
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in div in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- So sorgen Sie dafür, dass Schriftarten in CSS integriert werden
- CSS legt fest, dass eine bestimmte Zeile der Tabelle fixiert werden soll
- 4 CSS-Tipps, mit denen Sie die Geschwindigkeit beim Rendern von Seiten verbessern können
- Empfehlen Sie ein nützliches Chrome DevTools-Plug-in: CSS Overview Panel
- So verschönern Sie HTML-Tabellen mit CSS