Các tiện ích để kiểm soát việc căn chỉnh văn bản.
| 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; |
Sử dụng tiện ích text-left để căn trái văn bản của một phần tử:
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>Sử dụng tiện ích text-right để căn phải văn bản của một phần tử:
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>Sử dụng tiện ích text-center để căn giữa văn bản của một phần tử:
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>Sử dụng tiện ích text-justify để căn đều văn bản của một phần tử:
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>Sử dụng các tiện ích text-start và text-end, sử dụng logical properties để ánh xạ tới bên trái hoặc bên phải dựa trên hướng văn bản:
بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
<div dir="rtl" lang="ar"> <p class="text-end">فبدأت بالسير نحو الماء...</p></div>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 ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.