# Text align

> Utilities for controlling the alignment of text.

Source: https://www.zenplates.co/documentation/utilities/text-align (Utilities › Typography)

| Class           | Properties             |
| --------------- | ---------------------- |
| `.text-left`    | `text-align: left;`    |
| `.text-center`  | `text-align: center;`  |
| `.text-right`   | `text-align: right;`   |
| `.text-justify` | `text-align: justify;` |

## Usage

Control the text alignment of an element using the `.text-left`, `.text-center`, `.text-right`, and `.text-justify` utilities.

```html
<p class="text-left ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-center ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-right ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-justify ...">The quick brown fox jumped over the lazy dog.</p>
```

## Variants

By default, only responsive variants are generated for text alignment utilities.

### Responsive

To control the text alignment of an element at a specific breakpoint, add a `{screen}:` prefix to any existing text alignment utility.

For example, use `.md:text-center` to apply the `text-center` utility at only medium screen sizes and above.

### Hover-state

To include hover-state variants like `.hover:text-center`, add `"text-align"` to the `$hover-variants` variable when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

```scss
$hover-variants: (
  // ...
  "text-align",
);
```