简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Nutzen Sie HTML-Ausrichtungstechniken geschickt, um Text schön und elegant zu gestalten

WBOY
Freigeben： 2024-04-09 16:15:01
Original
651 Leute haben es durchsucht

HTML bietet eine Vielzahl von Ausrichtungsoptionen, um die Schönheit und Lesbarkeit von Text auf Webseiten zu verbessern: Horizontale Ausrichtung: Verwenden Sie das text-align-Attribut, um Text links, zentriert oder rechts auszurichten. Vertikale Ausrichtung: Verwenden Sie die Eigenschaft „vertikal ausrichten“, um Text vertikal auszurichten, beispielsweise an der Grundlinie, oben, in der Mitte oder unten. Float-Ausrichtung: Mithilfe des Float-Attributs können Sie die horizontale Position eines Elements anpassen, indem Sie es nach links oder rechts verschieben. Textausrichtungseigenschaften: Verwenden Sie die Eigenschaft „align“, um die Textausrichtung, z. B. links, zentriert oder rechts, für das gesamte Dokument oder für bestimmte Elemente festzulegen.

巧用 HTML 对齐技巧，让文字美观大方

Verwenden Sie HTML-Ausrichtungstechniken intelligent, um Text schön zu machen.

Beim Webdesign ist die Textausrichtung entscheidend für die Verbesserung der Gesamtschönheit und Lesbarkeit. HTML bietet eine Vielzahl von Ausrichtungsoptionen, mit denen Sie die Textposition einfach anpassen können.

1. Horizontale Ausrichtung Ausrichten: zentrierenText zentrieren

text-align: rechtsText rechts ausrichtenEigentlicher Fall:
text-align: left 左对齐文本
text-align: center 居中对齐文本
text-align: right 右对齐文本

实战案例：

<p style="text-align: center;">居中对齐</p>
<p style="text-align: right;">右对齐</p>
Nach dem Login kopieren

2. 垂直对齐

HTML 属性描述
vertical-align: baseline与基线对齐文本
vertical-align: top与容器顶部对齐文本
vertical-align: middle与容器中间对齐文本
vertical-align: bottom与容器底部对齐文本

实战案例：

<div style="height: 100px;">
  <p style="vertical-align: top;">顶部对齐</p>
  <p style="vertical-align: middle;">中间对齐</p>
  <p style="vertical-align: bottom;">底部对齐</p>
</div>
Nach dem Login kopieren

3. 浮动对齐

HTML 属性描述
float: left将元素向左浮动
float: right将元素向右浮动

实战案例：

<div style="width: 100%;">
  <div style="float: left; width: 50%; padding: 10px;">左浮动</div>
  <div style="float: right; width: 50%; padding: 10px;">右浮动</div>
</div>
Nach dem Login kopieren

4. 文本对齐属性

除了使用 CSS 样式，HTML 还提供了 align 属性，该属性为整个文档或特定元素设置文本对齐方式。

HTML-Attribut

Beschreibung

🎜🎜🎜🎜vertikal-align: baseline🎜🎜Text an der Grundlinie ausrichten🎜🎜🎜🎜vertical-align: top code>🎜🎜Text an der Oberseite des Containers ausrichten🎜🎜🎜🎜<code>vertikal-align: middle🎜🎜Text an der Mitte des Containers ausrichten🎜🎜🎜🎜vertikal- Ausrichten: unten🎜🎜 Text am unteren Rand des Containers ausrichten🎜🎜🎜🎜🎜🎜Praktischer Fall: 🎜🎜rrreee🎜🎜3. Float-Ausrichtung🎜🎜🎜🎜🎜🎜HTML-Attribut🎜🎜Beschreibung🎜 🎜🎜🎜 🎜🎜float : left 🎜🎜 Das Element nach links schweben lassen🎜🎜🎜🎜float: right🎜🎜 Das Element nach rechts schweben lassen🎜🎜🎜🎜🎜🎜Praktischer Fall : 🎜🎜rrreee🎜🎜4. Textausrichtungsattribut🎜🎜🎜 Zusätzlich zur Verwendung von CSS-Stilen bietet HTML auch das Attribut align, das die Textausrichtung für das gesamte Dokument oder für bestimmte Elemente festlegt. 🎜🎜🎜🎜🎜HTML-Attribute🎜🎜Beschreibung🎜🎜🎜🎜🎜🎜align="left"🎜🎜Linksbündiger Text🎜🎜🎜🎜align="center"🎜 🎜Text zentrieren🎜🎜🎜🎜align="right"🎜🎜Text rechts ausrichten🎜🎜🎜🎜🎜🎜Praktischer Fall: 🎜🎜rrreee🎜Durch den geschickten Einsatz von HTML-Ausrichtungstechniken können Sie Text einfach steuern Positionierung, um schöne und leicht lesbare Webseitenlayouts zu erstellen. 🎜

Das obige ist der detaillierte Inhalt vonNutzen Sie HTML-Ausrichtungstechniken geschickt, um Text schön und elegant zu gestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
php css java 编程 网页布局
Quelle：php.cn
Vorheriger Artikel：Beste Anleitung zum Komprimieren von HTML-Dateien in ZIP Nächster Artikel：Eine einfache Anleitung zum Lesen von Textdateien in HTML
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Das Modul ist im Vue-Projekt nicht definiert Ich habe gerade eine neue Vue-Anwendung erstellt, indem ich npmini tvue@latest ausgeführt ...
Aus 2023-11-17 12:38:53
0
2
394
Neuer Titel: Neues Skript zeigt seltsame Zeichenkodierung gespeicherter Daten nicht korrekt an Ich versuche, eine alte Website neu zu schreiben. Es ist auf Persisch und verwendet persis...
Aus 2023-11-17 10:51:01
0
2
273
<?php //Gegebenes Jahr, Monat und Tag, den Tag des Jahres ausgeben, in dem sich das Datum befindet (beachten Sie, dass das Schaltjahr 4 100 400 ist). <?php //Gegebenes Jahr, Monat und Tag, den Tag des Jahres ausgeben, in dem sich das ...
Aus 2023-11-14 23:55:21
0
1
79
WordPress 6.0 (add_editor_style) lädt style.css nicht im Gutenberg-Editor Ich nehme am UdemyWordPress-Kurs teil, um ein benutzerdefiniertes WordPress-Block-Theme zu...
Aus 2023-11-12 20:37:50
0
2
261
So beheben Sie das Problem: „Ressource konnte nicht geladen werden: net::ERR_CONNECTION_REFUSED http://localhost:8989/route?....' Es gibt ein Problem mit meinem Programm. Dies ist ein Programm über geografische Informati...
Aus 2023-11-12 19:34:27
0
1
244
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！
HTML 属性描述
align="left"左对齐文本
align="center"居中对齐文本
align="right"
<body align="center">
  <h1>居中标题</h1>
</body>
Nach dem Login kopieren
 2. Vertikal Ausrichtung