Use the table object to vertically center content.
These styles can be combined with grid width and white-space utilities
for a wide range of layout options.
Apply padding to .table-cell
elements to contol spacing.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell">
<h1 class="m0">.table-cell</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell">.table-cell</div>
</div>
The flag object can be emulated by adding .full-width
to one of the cells.
To add padding to the body, nest another div within the full-width cell.
The full-width utility makes the table object behave like the flag object.
<div class="table outline-blue">
<div class="table-cell p2">Image</div>
<div class="table-cell full-width">
<h1 class="m0">Flag Body</h1>
<p class="m0">The full-width utility makes the table object behave like the flag object.</p>
</div>
</div>
Use the .table-fixed
extension to create equal-width cells.
For vertically centered content
<div class="table table-fixed outline-blue">
<div class="table-cell">
<h1 class="m0">.table-cell</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell">.table-cell</div>
<div class="table-cell">.table-cell</div>
</div>
Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.
Only kicks in above the small breakpoint
Only kicks in above the large breakpoint
<div class="sm-table mb1 outline-blue">
<div class="sm-table-cell">
<h1 class="m0">.sm-table-cell</h1>
<p class="m0">Only kicks in above the small breakpoint</p>
</div>
<div class="sm-table-cell">.sm-table-cell</div>
</div>
<div class="lg-table outline-blue">
<div class="lg-table-cell">
<h1 class="m0">.lg-table-cell</h1>
<p class="m0">Only kicks in above the large breakpoint</p>
</div>
<div class="lg-table-cell">.lg-table-cell</div>
</div>
The table object can be combined with grid width utilities to create vertically centered columns.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell col-7">
<h1 class="m0">.table-cell.col-7</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell col-5">.table-cell.col-5</div>
</div>
MIT License