Center
Centers a column of content horizontally, up to a maximum width, with gutters on narrow screens.
Example
View Code
<main class="center" data-max="lg">
<h1>A readable column</h1>
<p>Never wider than the maximum, never touching the screen edge.</p>
</main>
When to use it
A center is the page column: the wrapper that keeps a page or a section from spreading across a wide screen, and keeps it off the edges of a narrow one. Use data-max="lg" for reading, xl or 2xl for pages with sidebars and grids.
How it works
max-inline-size caps the content, automatic inline margins split the remaining space equally, and padding-inline supplies the gutters. The box is content-box, so data-max is the width of the content, not the content plus gutters. data-intrinsic changes what is centered: the column shrinks to fit its content, still no wider than data-max, and that box is centered on the page, with each child centered on its own width inside it. Use it for a heading and a button that should sit in the middle rather than stretch.
Why this name
Centering is the whole job. Foundation 6 readers: this is .grid-container, with the width and gutters as attributes instead of Sass variables.
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-max |
enum | 2xs, xs, sm, md, lg, xl, 2xl |
xl |
The widest the content column may be. |
data-gap |
enum | none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl |
md |
The gutter on each side when the container is narrower than the maximum. |
data-intrinsic |
boolean | Shrink the column to its content (still no wider than data-max) and center it, with each child centered on its own width inside it. |
Children
No structural requirements.
Tokens
| Token | Description |
|---|---|
--yeti-width-xl |
The default maximum. |
--yeti-space-md |
The default gutter. |
Internal tokens (may change between minor versions)
- `--_yeti-max` - `--_yeti-gap`Accessibility
- Purely visual.
Browser support
- Used without guards: logical properties
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.