html 提供多種對齊選項，以改善網頁上的文本美觀和可讀性：水平對齊：使用 text-align 屬性，可左對齊、居中對齊或右對齊文本。垂直對齊：使用 vertical-align 屬性，可垂直對齊文本，如與基線、頂部、中間或底部對齊。浮動對齊：使用 float 屬性，可將元素向左或向右浮動，從而調整其水平位置。文本對齊屬性：使用 align 屬性，可為整個文檔或特定元素設置文本對齊方式，如左對齊、居中對齊或右對齊。
巧用 HTML 對齊技巧，讓文字美觀大方
在網頁設計中，文字對齊對于改善整體美觀和可讀性至關重要。HTML 提供了多種對齊選項，可幫助你輕松調整文本位置。
1. 水平對齊
| HTML 屬性 | 描述 |
|---|---|
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>
登錄后復制
通過巧妙運用 HTML 對齊技巧，你可以輕松地控制文本位置，從而創建美觀且易于閱讀的網頁布局。
