建立 2025-02-25 更新 2026-09-11

文字對齊（Text Alignment）

text-align 控制區塊容器裡行框的水平對齊。它對齊的是文字行（以及 inline / inline-block 子元素），不是用它來排整頁多欄。

常用值

.prose p { text-align: start; }
.hero h1 { text-align: center; }
.caption { text-align: end; color: #666; }

justify 在英文長文可能出現疏密不均；中文有時能讓版面更整齊，但仍要注意詞間空隙。窄欄位（手機）通常不要 justify。

適用範圍

• 作用在 block 容器 上，影響裡面的行內內容
• 對純 inline 元素本身設 text-align 沒有意義
• 置中一個 block 按鈕：把 text-align: center 設在父層，或改用 Flex

<div class="actions">
  <button>送出</button>
</div>

.actions { text-align: center; }

若按鈕是 display: block，text-align 置中的是它內部的文字，不是按鈕這個盒子。盒子置中請用 margin-inline: auto 或 Flex。

垂直方向：vertical-align

只對 inline / inline-block / table-cell 有效，不能拿來把 div 在頁面垂直置中。

.icon { vertical-align: -0.15em; } /* 與文字對齊微調 */

區塊垂直置中請用 Flex / Grid 的 align-items: center。

其他相關

h1, h2 { text-wrap: balance; }

總結

接著用 顏色 把對比與主題做好。