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 工具类将元素的文本左对齐：

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.

<!-- [!code classes:text-left] -->
<p class="text-left">So I started to walk into the water...</p>

右对齐文本

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

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.

<!-- [!code classes:text-right] -->
<p class="text-right">So I started to walk into the water...</p>

居中文本

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

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.

<!-- [!code classes:text-center] -->
<p class="text-center">So I started to walk into the water...</p>

两端对齐文本

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

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.

<!-- [!code classes:text-justify] -->
<p class="text-justify">So I started to walk into the water...</p>

使用逻辑属性

使用 text-start 和 text-end 工具类，它们通过逻辑属性根据文本方向映射到左侧或右侧：

بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.

<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:text-end] -->
<div dir="rtl" lang="ar">
  <p class="text-end">فبدأت بالسير نحو الماء...</p>
</div>

响应式设计

使用 md: 等断点变体前缀，即可让 text-align 工具类仅在中等及以上屏幕尺寸下生效：

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

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