Tailwind CSS - 文字對齊

Tailwind CSS **文字對齊** 是一個預定義類集合，它可以根據我們的選擇輕鬆調整 HTML 元素中的文字對齊方式。

Tailwind CSS 文字對齊類

以下是 Tailwind CSS 文字對齊類列表，以及控制文字對齊方式的屬性。

類	CSS 屬性
text-left	text-align: left;
text-center	text-align: center;
text-right	text-align: right;
text-justify	text-align: justify;
text-start	text-align: start;
text-end	text-align: end;

Tailwind CSS 文字對齊類的功能

**text-left:** 此類將其容器內的文字左對齊。
**text-center:** 此類將其容器內的文字水平居中。。
**text-right:** 此類將其容器內的文字右對齊。
**text-justify:** 此類在文字的每一行中均勻地間隔單詞。
**text-start:** 此類根據語言方向將其容器內的文字左對齊。
**text-end:** 此類根據語言方向將其容器內的文字右對齊。

Tailwind CSS 文字對齊類示例

以下是 Tailwind CSS 文字對齊類的示例，這些示例展示瞭如何在元素內控制文字對齊方式。

左對齊和右對齊文字

此示例顯示瞭如何使用 Tailwind CSS 實用程式類將文字左對齊和右對齊。

示例

 
<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>  
    <div class="max-w-md border border-gray-300 p-4">
      <p class="text-left mb-2">
        <strong>Left-aligned text:</strong> 
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
      </p>
      <p class="text-right">
        <strong>Right-aligned text:</strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
      </p>
    </div>
</body>

</html>

水平居中文字

此示例顯示瞭如何在 Tailwind CSS 中使用 text-center 類將其容器內的文字水平居中。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="max-w-md p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>   
    <p class="text-center border border-gray-300 ">
        <strong>Centered Text:</strong><br>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.<br>
        Practicing gratitude helps shift our focus 
        from what we lack to what we have.
    </p>
</body>

</html>

建立等間距的文字行

此示例顯示瞭如何在 Tailwind CSS 中使用 text-justify 類建立等間距的文字行，在其容器內建立對齊內容。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="max-w-md p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>   
    <p class="text-justify border border-gray-300 p-4">
        <strong>Justified Text:</strong><br>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment. Practicing 
        gratitude helps shift our focus from what we 
        lack to what we have.
    </p>
</body>

</html>

文字的開始和結束對齊

此示例展示瞭如何使用 Tailwind CSS 中的 text-start 和 text-end 類根據語言方向對齊文字。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS  Text Alignment
    </h1> 
    <div class="max-w-md border-2 border-gray-300 p-4">
    <p class="text-start mb-4">
        <strong>Start-aligned text: </strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
    </p>
    <p class="text-end">
        <strong>End-aligned text:</strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
    </p>
    </div>
</body>

</html>

列印頁面