Centralize

Pack name: seed-centralize

Centralize utility pack for Seed

This pack uses flexbox to magically vertically/horizontally align things.

Contents

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

I'm in the middle

<div class="u-centralize t-bg-blue-200" style="height: 200px;">
  <h1>I'm in the middle</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:

I'm in the middle

Aww… I wanna be too!

<div class="u-centralize t-bg-blue-200" style="height: 200px;">
  <h1>I'm in the middle</h1>
  <p>Aww… I wanna be too!</p>
</div>

Instead, keep all of the child elements within a container:

I'm in the middle

Yay! I'm in the middle now.
Kinda.

<div class="u-centralize t-bg-blue-200" style="height: 200px;">
  <div>
    <h1>I'm in the middle</h1>
    <p>
      Yay! I'm in the middle now.<br>
      Kinda.
    </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.

I'm in the middle

I'm totes in the middle now.

<div class="u-centralize t-bg-blue-200" style="height: 200px;">
  <div class="tx-center">
    <h1>I'm in the middle</h1>
    <p>I'm totes in the middle now.</p>
  </div>
</div>