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;

示例(Examples)

¥Examples

左对齐文本(Left aligning text)

¥Left aligning text

使用 text-left 工具左对齐元素的文本:

¥Use the text-left utility to left align the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

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

右对齐文本(Right aligning text)

¥Right aligning text

使用 text-right 工具右对齐元素的文本:

¥Use the text-right utility to right align the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

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

居中文本(Centering text)

¥Centering text

使用 text-center 工具将元素的文本居中:

¥Use the text-center utility to center the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

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

对齐文本(Justifying text)

¥Justifying text

使用 text-justify 工具对齐元素的文本:

¥Use the text-justify utility to justify the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

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

响应式设计(Responsive design)

¥Responsive design

text-align 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号