Centralize
Utility classes that uses flexbox to magically vertically/horizontally align things.
Install
npm install seed-centralize --save
Dependencies
Usage
Add the class .u-centralize
to the selector you want its inner content to the vertically/horizontally aligned.
This utility pack supports responsive modifiers.
Example
You've got a friend in me
<div class="u-centralize t-bg-blue-200" style="height: 200px;">
<h1>You've got a friend in me</h1>
</div>
Multiple child elements
Having multiple elements like h1
, p
, or a
being vertically aligned is a common design pattern, especially for big “hero” type components.
Keep in mind that the flexbox based alignment technique only works if there is one child selector within the parent of .u-centralize
.
Below is an example of misalignment if there is more tha child element:
You've got a friend in me
When the road looks rough ahead
<div class="u-centralize t-bg-blue-200" style="height: 200px;">
<h1>You've got a friend in me</h1>
<p>When the road looks rough ahead</p>
</div>
Instead, keep all of the child elements within a container:
You've got a friend in me
When the road looks rough ahead
And you're miles and miles
<div class="u-centralize t-bg-blue-200" style="height: 200px;">
<div>
<h1>You've got a friend in me</h1>
<p>
When the road looks rough ahead<br>
And you're miles and miles
</p>
</div>
</div>
Notice how the text elements aren’t perfectly center aligned. That is because .u-centralize
only takes care of aligning it’s own child element (the container div
in the above example). If various elements are contained in a containing div
, the responsibility of alignment shifts to the container.
Depending on the types of elements, they can be horizontally aligned using .tx-center
(from seed-typography) for text/inline elements or .u-mrg-auto
(from seed-spacing) for block elements.
You've got a friend in me
When the road looks rough ahead
<div class="u-centralize t-bg-blue-200" style="height: 200px;">
<div class="tx-center">
<h1>You've got a friend in me</h1>
<p>When the road looks rough ahead</p>
</div>
</div>
Configurations
Below are the default Sass configuration variables for seed-centralize. The variables can be found in the pack’s _config.scss
file.
seed-centralize/_config.scss
$seed-centralize-namespace: "u-centralize" !default;