Lzh on GitHub

text-align

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

快速参考

类别样式
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;
text-starttext-align: start;
text-endtext-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. 

<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. 

<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. 

<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. 

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

响应式设计

在 text-align 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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