text-align

text-align

用于控制文本对齐方式的工具类。

Class Styles

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;

示例

使用 text-left 工具类将元素的文本左对齐：

于是我开始走向水中。老实说，孩子们，我当时害怕极了。但我继续前进，当我穿过浪花时，一种奇怪的平静笼罩了我。我不知道这是神的干预还是所有生物的亲密关系，但我要告诉你杰瑞，在那一刻，我就是一名海洋生物学家。

<p class="text-left">于是我开始走向水中...</p>

使用 text-right 工具类将元素的文本右对齐：

于是我开始走向水中。老实说孩子们，我当时害怕极了。但我坚持前进，当我穿过浪花时，一种奇怪的平静笼罩了我。我不知道这是神的干预还是所有生命的亲缘关系，但我要告诉你杰瑞，在那一刻，我就是一名海洋生物学家。

<p class="text-right">于是我开始走向水中...</p>

使用 text-center 工具类将元素的文本居中对齐：

<p class="text-center">于是我开始走向水中...</p>

使用 text-justify 工具类来实现元素文本的两端对齐：

于是我开始走向水中。孩子们，我不想骗你们，我当时害怕极了。但我坚持前进，当我穿过浪花时，一种奇怪的平静笼罩了我。我不知道这是神的干预还是所有生命的亲缘关系，但我要告诉你杰瑞，在那一刻，我就是一名海洋生物学家。

<p class="text-justify">于是我开始走向水中...</p>

Prefix a text-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-left md:text-center ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.