Center

The <Center> is a layout component that centers its children horizontally within a container.

Usage

You can use it to center a single child or a list of children. The maxWidth prop sets the maximum width of the container and the space prop adds spacing between the children elements.

The <Center> component can also be used with components like <Text>, <Stack> or <Inline> component.

import { Center } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <Center maxWidth="xxlarge" space={1}>    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />  </Center>);

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Center stories

Center

Prop

Type

Accessibility props (6)

Prop

Type

Building layouts

Learn how to build layouts.

Last update: 4 months ago

The <Center> is a layout component that centers its children horizontally within a container.

Usage

You can use it to center a single child or a list of children. The maxWidth prop sets the maximum width of the container and the space prop adds spacing between the children elements.

The <Center> component can also be used with components like <Text>, <Stack> or <Inline> component.

import { Center } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <Center maxWidth="xxlarge" space={1}>    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />  </Center>);