Heim > Web-Frontend > CSS-Tutorial > So zentrieren Sie Textinhalte in CSS

So zentrieren Sie Textinhalte in CSS

王林
Freigeben: 2023-01-06 11:14:14
Original
8117 Leute haben es durchsucht

Die Möglichkeit, Textinhalte in CSS zu zentrieren, besteht darin, dem Textelement das Attribut „text-align“ hinzuzufügen und den Attributwert auf „zentriert“ zu setzen, z. B. [h1 {text-align: center}], was bedeutet, dass die horizontale Ausrichtung festgelegt wird der Titel Zentriert werden.

So zentrieren Sie Textinhalte in CSS

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer. Das Attribut

text-align gibt die horizontale Ausrichtung von Text innerhalb eines Elements an.

Gemeinsame Attributwerte:

  • left Ordnet den Text links an. Standard: Wird vom Browser bestimmt.

  • rechts Ordne den Text rechts an.

  • Mitte Ordnen Sie den Text in der Mitte an.

  • justify erreicht den Effekt, dass Text an beiden Enden ausgerichtet wird.

  • inherit gibt an, dass der Wert des text-align-Attributs vom übergeordneten Element geerbt werden soll.

Ein kleines Beispiel:

<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>

</html>
Nach dem Login kopieren

Sehen wir uns den Effekt an:

So zentrieren Sie Textinhalte in CSS

Verwandte Videofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Textinhalte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage