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:** 此类根据语言方向将其容器内的文本右对齐。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 文本对齐类示例

以下是 Tailwind CSS 文本对齐类的示例，这些示例展示了如何在元素内控制文本对齐方式。

左对齐和右对齐文本

此示例显示了如何使用 Tailwind CSS 实用程序类将文本左对齐和右对齐。

示例

Open Compiler

 
<!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 类将其容器内的文本水平居中。

示例

Open Compiler

<!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 类创建等间距的文本行，在其容器内创建对齐内容。

示例

Open Compiler

<!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 类根据语言方向对齐文本。

示例

Open Compiler

<!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>

打印页面