Star

The Center

The center allows you to horizontally center an element.

<center-l layout="max-width:1000px and-text recursive">...</center-l>

When to use ?

You have to center an element which takes the widht of its content or a max-width that you define.

Then you can tweak it to do the following things :

  • center all text inside
  • center all descendants inside (anything in the center will be centered regardless the nesting level)

Attributes

  • max-width : the ideal width if possible.
  • and-text : center the text inside the center.
  • recursive : center descendants elements inside the center.

Basic Usage

Without max-width the center take the width of it’s content.

max-width

When you set a max-width on an element, the element will try to take up that width if there is enough space available.

However, if there isn’t enough space, the element will adjust and use the maximum available space instead.

and-text

If you want to center the text inside you can add the and-text attribute without value.

recursive

To center all the descendants from the center you can use the recursive attribute without value.

In this case the center will become a flexbox.