排版
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 ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。