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.
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 rechts ausrichten | |
|---|---|
text-align: left |
左对齐文本 |
text-align: center |
居中对齐文本 |
text-align: right |
右对齐文本 |
实战案例：
<p style="text-align: center;">居中对齐</p> <p style="text-align: right;">右对齐</p>
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>
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>
4. 文本对齐属性
除了使用 CSS 样式，HTML 还提供了 align 属性，该属性为整个文档或特定元素设置文本对齐方式。
| HTML 属性 | 描述 |
|---|---|
align="left" | 左对齐文本 |
align="center" | 居中对齐文本 |
align="right"<body align="center"> <h1>居中标题</h1> </body> Nach dem Login kopieren | 2. Vertikal Ausrichtung |
![Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
![Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
