text-align
En esta página
| Clase | Propiedades CSS |
|---|---|
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#
Left aligning text#
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.
<!-- [!code classes:text-left] -->
<p class="text-left">So I started to walk into the water...</p>
Right aligning text#
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.
<!-- [!code classes:text-right] -->
<p class="text-right">So I started to walk into the water...</p>
Centering text#
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.
<!-- [!code classes:text-center] -->
<p class="text-center">So I started to walk into the water...</p>
Justifying text#
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.
<!-- [!code classes:text-justify] -->
<p class="text-justify">So I started to walk into the water...</p>
Using logical properties#
Use the text-start and text-end utilities, which use logical properties to map to either the left or right side based on the text direction:
{
بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:text-end] -->
<div dir="rtl" lang="ar">
<p class="text-end">فبدأت بالسير نحو الماء...</p>
</div>