# Content Alignment

Wrap any content in `center:` / `/center` or `right:` / `/right` to change its alignment. Works with text, headings, buttons, images, brand display, and any other markdown.

## How does alignment work?

Alignment fences wrap content in a positioned block. The behavior depends on the content type:

| Content | Alignment effect |
|---|---|
| Text, headings | Text is centered or right-aligned within the line |
| Buttons, image rows | Row is positioned center or right via flexbox |
| Images, brand display | Block is centered or right-aligned via margin |
| [Cards](/docs/cards#card-alignment) | Cards stay at natural width and are positioned center or right instead of stretching to fill the row |
| Lists, tables, blockquotes, code blocks, embeds | Block shrinks to fit its content and is positioned center or right — text inside stays left-aligned |

The second group — lists, tables, blockquotes, code blocks, and embeds — are positioned as a unit. A centered bullet list renders with normal left-aligned text and bullets, but the whole list sits in the center of the page.

## Centered text

```markdown
center:
This paragraph is centered.
/center
```

center:
This paragraph is centered.
/center

## Right-aligned text

```markdown
right:
This paragraph is right-aligned.
/right
```

right:
This paragraph is right-aligned.
/right

## Centered buttons

Alignment fences work with button rows:

```markdown
center:
button: Get Started: /docs/getting-started
button: View Pricing: /pricing +outline
/center
```

center:
button: Get Started: /docs/getting-started
button: View Pricing: /pricing +outline
/center

## Centered images

Images with or without [modifiers](/docs/images#image-modifiers) respect alignment:

```markdown
center:
![Mountain](https://picsum.photos/id/29/800/400 +width:400)
/center
```

center:
![Mountain](https://picsum.photos/id/29/800/400 +width:400)
/center

## Right-aligned image

```markdown
right:
![Lake](https://picsum.photos/id/16/800/400 +width:300)
/right
```

right:
![Lake](https://picsum.photos/id/16/800/400 +width:300)
/right

## Brand display

The `{{brandDisplay}}` and `{{brandDisplay +width:N}}` variables respect alignment fences:

```markdown
center:
{{brandDisplay +width:300}}
/center
```

center:
{{brandDisplay +width:300}}
/center

See [Brand Display](/docs/brand-display#content-variables) for all brand variable options.

## Centered lists

Lists inside alignment fences are positioned as a block — the text and bullets stay left-aligned, but the list itself is centered on the page:

```markdown
center:
- First item
- Second item
- Third item
/center
```

center:
- First item
- Second item
- Third item
/center

This works the same way for numbered lists and checklists.

## Centered tables

Tables shrink to fit their content and center as a block:

```markdown
center:
| Feature | Status |
|---|---|
| Alignment | Shipped |
| Lists | Shipped |
/center
```

center:
| Feature | Status |
|---|---|
| Alignment | Shipped |
| Lists | Shipped |
/center

## Centered blockquotes and code

Blockquotes and code blocks are also positioned as a block unit:

```markdown
center:
> This quote is centered on the page.
/center
```

center:
> This quote is centered on the page.
/center

## Mixed content

Alignment fences wrap any content — headings, lists, code blocks, and components all work:

```markdown
center:
### Ready to build?

Your site is one command away.

button: Get Started: /docs/getting-started +big
/center
```

center:
### Ready to build?

Your site is one command away.

button: Get Started: /docs/getting-started +big
/center

## Nesting

Alignment fences can be nested. The inner fence overrides the outer:

```markdown
center:
This text is centered.

right:
This text is right-aligned.
/right

Back to centered.
/center
```

center:
This text is centered.

right:
This text is right-aligned.
/right

Back to centered.
/center

## Left alignment

Use `left:` / `/left` to reset alignment inside a centered or right-aligned parent:

```markdown
center:
Centered content.

left:
This section is left-aligned again.
/left

Back to centered.
/center
```

## Syntax reference

| Fence | Effect |
|---|---|
| `center:` / `/center` | Center-align content |
| `right:` / `/right` | Right-align content |
| `left:` / `/left` | Left-align content (reset) |

Alignment fences are block-level — each fence tag must be on its own line. Content inside fenced code blocks is not processed.

To hide content visually while keeping it accessible to search engines and screen readers, use [`hidden:` / `/hidden`](/docs/hidden-content).