排版
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>
请参阅 变体文档 详细了解如何使用变体。