CSS的text-align 相等於 WORD中的文字排版

##為什麼要有這功能
文字對齊是網頁設計中最基本也是最重要的部分之一。不同的文字對齊方式，能夠有效地改變頁面的排版結構與可讀性，強調內容的重點。透過text-align屬性，能夠簡單控制文字的視覺排列，使其更契合整體設計，從而提升頁面的專業感和讀者的體驗。

##核心結構
text-align: left: 將文字向左對齊，這是大多數語言的預設排版方式。
text-align: right: 文字靠右對齊，常用於特定情境如數字、價格等內容的排版。
text-align: center: 文字置中對齊，適合標題、短句等強調的內容。
text-align: justify: 將文字均勻對齊於左右兩側，適用於段落文本，使其呈現整齊的兩邊對齊效果。

##主要功能
靈活排版: 透過不同的對齊方式，滿足各種版面的需求，從段落到標題都能獲得適當的視覺呈現。
提升閱讀性: 透過左右對齊的justify，能夠讓段落文字排列更加整齊，讓文章版面更具專業感。
強調內容重點: 置中對齊通常用來強調某段文字或標題，使內容在頁面上更引人注目。

##注意事項
適用性: 不是所有情境下都適合使用justify，因為它可能在某些設備上造成字距過大或過小的問題。
可讀性: 長篇文字不建議使用text-align: center，會影響閱讀流暢度。
語言方向: 需注意文字的方向性，例如阿拉伯文可能需要右對齊。

##簡單範例應用

<style>
.left-align {
    text-align: left; /* 文字靠左對齊 */
}

.right-align {
    text-align: right; /* 文字靠右對齊 */
}

.center-align {
    text-align: center; /* 文字置中對齊 */
}

.justify-align {
    text-align: justify; /* 文字左右對齊 */
}
</style>


<div class="left-align">
  這段文字會靠左對齊。這是網頁中最常見的對齊方式，適合段落文本。
</div>

<div class="right-align">
  這段文字會靠右對齊。這種對齊方式適合特定用途，如價格列表或表格。
</div>

<div class="center-align">
  這段文字會置中對齊。適合用於標題或短句，讓內容在視覺上更加突出。
</div>

<div class="justify-align">
  這段文字會左右對齊，形成整齊的段落排版效果，提升專業感和可讀性。
</div>