Center

Use the Center layout to vertically and horizontally centered content.

Class .wb-l-center

The center layout vertically and horizontally centers any content. The content should all be under a single <div>. Here we center an image.

<div class='wb-l-center' style='height: 300px'>
  <div>
     <img src='assets/papel/avatar.png' width='100' />
  </div>
</div>

In this example we center a heading and paragraph, and instead of defining a set height for the container, we define a padding.

Horton Hears a Who

On the fifteenth of May,
In the jungle of Nool,
In the heat of the day,
In the cool of the pool,
He was splashing. 

<div class='wb-l-center' style='padding: 50px'>
  <div>
     <h1 class='wb-heading-5 wb-heading--colored'>Horton Hears a Who</h1>
     <p class='wb-text'>
       On the fifteenth of May,<br/>In the jungle of Nool,<br/>
       In the heat of the day,<br/>In the cool of the pool,<br/>
       He was splashing.
     <p>
  </div>
</div>

If needed, you can apply additional styles on the <div> that holds the content. For example, applying text-align: center to help center text with an image.

Papel says hello

<div class='wb-l-center' style='height: 300px'>
  <div style='text-align: center'>
     <img src='assets/papel/avatar.png' width='100' />
     <p class='wb-text wb-u-margin-t-2'>Papel says hello</p>
  </div>
</div>