Center

Centeralize elements based on the max property. When max is less than the container width it will keep center alignment. By default max is 70ch.

<Center max="30ch">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
</Center>

Text centering

To center nested text use andText set to true.

<Center max="30ch" andText>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
</Center>

Intrinsic centering

By default Center use max width to align elements. If needed it can also center elements based on their natural, conten-based width. To do that just set intrinsic to true.

<Center intrinsic max="30ch">
  <Button buttonType="primary">Click me</Button>
</Center>

Props