CSS 文字對齊屬性詳解：text-align 和 text-justify

CSS 文字對齊屬性詳解：text-align 和 text-justify

在網頁設計中，文字對齊是一個非常重要的面向。透過適當的文字對齊，可以讓網頁內容更專業、更整潔，提升使用者體驗。 CSS 提供了兩個文字對齊屬性：text-align 和 text-justify，本文將對這兩個屬性進行詳細介紹，並提供具體的程式碼範例。

1. text-align 屬性

text-align 屬性用於指定文字在容器中的水平對齊方式。常見的取值有：left（左對齊，預設值）、center（居中對齊）、right（右對齊）和 justify（兩端對齊）。

範例程式碼：

<p style="text-align: left;">左对齐文本</p>
<p style="text-align: center;">居中对齐文本</p>
<p style="text-align: right;">右对齐文本</p>

2. text-justify 屬性

text-justify 屬性用於指定文字在容器中的對齊方式，並且可以控制文字的間隔調整，以使得每一行的行末對齊。 text-justify 屬性僅適用於多行文字。

範例程式碼：

<p style="text-justify: auto;">自动对齐文本</p>
<p style="text-justify: inter-word;">逐字对齐文本</p>
<p style="text-justify: distribute;">分散对齐文本</p>

3. text-align-last 屬性（部分瀏覽器支援）

text-align-last 屬性用於指定最後一行文字在容器中的對齊方式。常見的取值有：left（左對齊）、center（居中對齊）、right（右對齊）和 justify（兩端對齊）。

範例程式碼：

<p style="text-align-last: left;">左对齐最后一行文本</p>
<p style="text-align-last: center;">居中对齐最后一行文本</p>
<p style="text-align-last: right;">右对齐最后一行文本</p>

4. 結論

透過使用text-align 和text-justify 屬性，我們可以輕鬆地對網頁中的文字進行對齊和調整。在網頁設計中，合理地使用這兩個屬性可以提升使用者的閱讀體驗和頁面的整潔度。

以上就是 CSS 文字對齊屬性 text-align 和 text-justify 的詳細介紹。透過學習和實踐，相信您已經對這兩個屬性有了初步的了解和掌握。希望本文的內容對您有所幫助，同時也期待您在使用時能更好地應用這兩個屬性，為網頁設計增添亮點。

以上是CSS 文字對齊屬性詳解：text-align 和 text-justify的詳細內容。更多資訊請關注PHP中文網其他相關文章！