Centered Container
Combine width or max-width values with the center class to create a centered container for your content.
Centered Container
HTML
<section class="mw5 mw7-ns center bg-light-gray pa3 ph5-ns">
<h1 class="mt0">Centered Container</h1>
<p class="lh-copy measure">
Combine width or max-width values with the center class to create a centered
container for your content.
</p>
</section>
css
.lh-copy {
line-height: 1.5;
}
.mw5 {
max-width: 16rem;
}
.bg-light-gray {
background-color: #eee;
}
.pa3 {
padding: 1rem;
}
.mt0 {
margin-top: 0;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.mw7-ns {
max-width: 48rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
}
Css stats for this component
- Gzipped Size
- 231B
- Selectors
- 9
- Declarations
- 11
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-line-height tachyons-max-widths tachyons-skins tachyons-spacing tachyons-typography tachyons-utilities