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 | 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
center:
This paragraph is centered.
/center
This paragraph is centered.
Right-aligned text
right:
This paragraph is right-aligned.
/right
This paragraph is right-aligned.
Centered buttons
Alignment fences work with button rows:
center:
button: Get Started: /docs/getting-started
button: View Pricing: /pricing +outline
/center
Centered images
Images with or without modifiers respect alignment:
center:
/center
Right-aligned image
right:
/right
Brand display
The {{brandDisplay}} and {{brandDisplay +width:N}} variables respect alignment fences:
center:
{{brandDisplay +width:300}}
/center
See Brand Display 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:
center:
- First item
- Second item
- Third item
/center
- First item
- Second item
- Third item
This works the same way for numbered lists and checklists.
Centered tables
Tables shrink to fit their content and center as a block:
center:
| Feature | Status |
|---|---|
| Alignment | Shipped |
| Lists | Shipped |
/center
| Feature | Status |
|---|---|
| Alignment | Shipped |
| Lists | Shipped |
Centered blockquotes and code
Blockquotes and code blocks are also positioned as a block unit:
center:
> This quote is centered on the page.
/center
This quote is centered on the page.
Mixed content
Alignment fences wrap any content — headings, lists, code blocks, and components all work:
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:
center:
This text is centered.
right:
This text is right-aligned.
/right
Back to centered.
/center
This text is centered.
right: This text is right-aligned. /right
Back to centered.
Left alignment
Use left: / /left to reset alignment inside a centered or right-aligned parent:
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.