Center

The <Center> is a layout component that centers its children horizontally. You can use it to center a single child or a list of children. The <Center> component has also the property maxWidth.

The <Center> component can also be a child from the <Stack> or <Inline> component.

Import


import { Center } from '@marigold/components';

Props

Property	Type	Default	Description
`space`	`ResponsiveStyleValue<string>`	`none`	The space between the children
`maxWidth`	`string`	`-`	The maximum width of the container.

Examples

Center element with maximum width

To center an element you must give the element a maxWidth prop.

Preview

Code

Center more than one element with space

To add spaces between each child you can use the prop space.

Preview

Code

Center inside Text Block

If you want to center something like a <Button> you must only wrap your component with a <Center> component.

Preview

Code

Star Wars - The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth. The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....