text-align.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "text-align"; export const description = "Utilities for controlling the alignment of text.";

<ApiTable rows={[ ["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>

Responsive design