1. 文本排版
  2. text-align

文本排版

text-align

用于控制文本对齐方式的实用程序。

样式
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">So I started to walk into the water...</p>

右对齐文本

使用 text-right 实用程序右对齐元素的文本

所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。

<p class="text-right">So I started to walk into the water...</p>

居中文本

使用 text-center 实用程序居中元素的文本

所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。

<p class="text-center">So I started to walk into the water...</p>

两端对齐文本

使用 text-justify 实用程序两端对齐元素的文本

所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。

<p class="text-justify">So I started to walk into the water...</p>

响应式设计

前缀a text-align 实用程序 与诸如 md: 之类的断点变体一起使用,以便仅在中等 屏幕尺寸及以上时应用该实用程序

<p class="text-left md:text-center ...">  <!-- ... --></p>

了解有关在变体文档中使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策