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

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

在網頁設計中，文字的對齊是非常重要的一環。好的文字對齊可以提升頁面的整體美觀和可讀性。在CSS中，有兩個常用的文字對齊屬性，分別是text-align和justify-content。

一、text-align

text-align屬性用來設定文字的水平對齊方式。它可以應用在區塊級元素和行內元素上。

可以使用的值有：

1. left：左對齊，預設值。
2. right：右對齊。
3. center：居中對齊。
4. justify：兩端對齊，行中的文字將被拉伸以填充整個行的寬度。

範例：

<style>
    p {
        text-align: center;
    }
    h1, h2 {
        text-align: right;
    }
</style>

<h1 id="这是一个标题">这是一个标题</h1>
<h2 id="这是一个副标题">这是一个副标题</h2>
<p>这是一段居中对齐的文本。</p>

上述程式碼中，h1和h2標題元素的文字會右對齊，而p元素中的文字會居中對齊。

二、justify-content

justify-content屬性用來設定多行文字的對齊方式。它只能應用於區塊級元素，並且只對有多行文字的元素有效。

可以使用的值有：

1. flex-start：預設值，起始對齊。
2. flex-end：末尾對齊。
3. center：居中對齊。
4. space-between：兩端對齊，行中的文字將均勻分佈在行中，第一行頂頭對齊，最後一行底部對齊。
5. space-around：均勻對齊，行中的文字將均勻分佈在行中，每行的上下空間相等。

範例：

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 100px;
    }
</style>

<div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
    <div class="item">项目 4</div>
    <div class="item">项目 5</div>
    <div class="item">项目 6</div>
</div>

上述程式碼中，容器.container使用了flex佈局，並設定了justify-content屬性為space-between，這樣每一個.item元素都會被均勻分佈在容器內，最後一行的上下空間也會和其他行一樣。

綜上所述，text-align屬性用於設定單行文字的水平對齊方式，而justify-content屬性則用於設定多行文字的對齊方式。它們能夠使頁面的文字排布更加整齊，提升頁面的可讀性和美觀性。在實際使用中，可以根據需要選擇合適的對齊方式，並透過調整樣式來達到最佳效果。

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