Tailwind CSS - Text Alignment
Tailwind CSS Text Alignment 是一组预定义类，可根据我们的选择轻松调整 HTML 元素内的文本对齐方式。
Tailwind CSS Text Alignment 类
以下是 Tailwind CSSText Alignment 类的列表，其中包含用于控制文本对齐方式的属性。
| 类 | 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>
