# Display and alignment

Source: https://iriscss.com/documentation/helpers/display-and-alignment/

Small utilities for when the markup alone does not give the layout you need.

Utilities sit in a late cascade layer, so they win over element and component styles.

## Display

| Class | Sets |
| --- | --- |
| `.hidden` | `display: none` |
| `.block` | `display: block` |
| `.inline-block` | `display: inline-block` |
| `.inline` | `display: inline` |
| `.flex` | `display: flex` |
| `.inline-flex` | `display: inline-flex` |
| `.contents` | `display: contents` |
| `.invisible` | `visibility: hidden`, keeps its space |
| `.visible` | `visibility: visible` |

The `hidden` attribute uses `!important`, so it wins over every display class. Prefer it for content a script shows and hides.

```html
<p>Visible paragraph.</p>
<p class="flex" hidden>Hidden, even with a display class.</p>
<p><span class="invisible">Invisible</span> text keeps its space.</p>
```

## Alignment

| Class | Sets |
| --- | --- |
| `.text-center` | `text-align: center` |
| `.justify-center` | `justify-content: center` |
| `.items-center` | `align-items: center` |
| `.mx-auto` | `margin-inline: auto` |

```html
<p class="text-center">Centered text</p>
<div class="flex justify-center items-center" style="gap: 1rem">
  <div>Centered</div>
  <div>flex items</div>
</div>
```