本文目錄導讀：

1. 文字水平對齊
2. 文字垂直對齊
3. 文字基線對齊
4. 文字間距調(diào)整
5. 文字排版示例

CSS文字對齊方式詳解

文字水平對齊

在CSS中，可以使用text-align屬性來實現(xiàn)文字的水平對齊，該屬性有以下幾個值：

left：文字左對齊

right：文字右對齊

center：文字居中對齊

justify：文字兩端對齊

如果你想讓一段文字居中顯示，可以這樣做：

p {
  text-align: center;
}

文字垂直對齊

CSS中并沒有直接的vertical-align屬性來設(shè)置文字的垂直對齊方式，但可以通過其他方法來實現(xiàn)，可以使用line-height屬性來設(shè)置行高，或者使用vertical-align屬性來設(shè)置表格單元格內(nèi)容的垂直對齊方式。

文字基線對齊

在CSS中，文字的基線對齊是默認的，即文字的底部與容器的底部對齊，如果你想改變文字的基線對齊方式，可以使用vertical-align屬性來設(shè)置。

img {
  vertical-align: top; /* 圖像的頂部與文字的頂部對齊 */
}

文字間距調(diào)整

除了對齊方式，CSS還可以用來調(diào)整文字之間的間距，常用的屬性包括letter-spacing（設(shè)置字符間距）和word-spacing（設(shè)置單詞間距）。

h1 {
  letter-spacing: 2px; /* 設(shè)置字符間距為2像素 */
  word-spacing: 3px; /* 設(shè)置單詞間距為3像素 */
}

文字排版示例

下面是一個簡單的排版示例，展示如何應用上述的對齊和間距調(diào)整：

<div style="text-align: center;">
  <h1 style="text-align: left; letter-spacing: 2px; word-spacing: 3px;">
    歡迎來到我的網(wǎng)站！
  </h1>
  <p style="text-align: right; line-height: 1.5;">
    這里是一些關(guān)于我的介紹。
  </p>
</div>

在這個示例中，標題h1實現(xiàn)了左對齊并調(diào)整了字符和單詞的間距，段落p實現(xiàn)了右對齊并調(diào)整了行高，整個容器div則實現(xiàn)了居中對齊。