suchen

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:557545Durchsuche

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.

So zentrieren Sie Text in div in CSS

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:

So zentrieren Sie Text in div in CSS

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!

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 verschönern Sie HTML-Tabellen mit CSSNächster Artikel：So verschönern Sie HTML-Tabellen mit CSS

In Verbindung stehende Artikel

Mehr sehen