Typography
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 工具将元素文本左对齐：
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>响应式设计
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 ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
