StableLayout · since 0.1.0
Centers a block horizontally at reading width without side gutters.
Pick this part
Pick l-center for
- Long-form text or a single form that should sit at a comfortable reading width.
Pick another part for
- The outermost page wrapper that also needs side gutters: use
l-container. - Inside another centered block: one reading width per column is enough.
Build it
- Start with an element and add
class="l-center". - Put the parts inside. The layout sets the space between them, so they need no margins.
Articles read best at 60 to 75 characters per line.
<div class="l-center">
<p class="u-margin-0">Articles read best at 60 to 75 characters per line.</p>
</div>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Center one column of reading content.
Articles read best at 60 to 75 characters per line.
<div class="l-center">
<p class="u-margin-0">Articles read best at 60 to 75 characters per line.</p>
</div>validate: 0 issues
Doesn't fit
Don't nest centered blocks inside each other.
<div class="l-center">
<div class="l-center">
<p class="u-margin-0">Twice centered.</p>
</div>
</div>Guidance only: the validator can't catch this one yet, so review for it.
Spec sheet
This part has no modifiers, elements or states.