To CenterX

Atomic Props to make children elements align to center horizontal.

Atomic Props	Effect
toCenterX	Make children elements align to center horizontal

Usage

Center horizontal quickly with toCenterX prop:

Result

Loading...

Live Editor

<Box toCenterX bgGray100 square-200> <Box square-60 bgOrange400 rounded-8></Box> <Box square-80 bgBlue400 rounded-8></Box> </Box>

<Box toCenterX bgGray100 square-200>
  <Box square-60 bgOrange400 rounded-8></Box>
  <Box square-80 bgBlue400 rounded-8></Box>
</Box>

Compose

toCenterX can compose with toTop、toCenterY、toBottom、toBetween、toEvenly、toAround:

Compose base on toCenterX

row

toCenterX toTop

row

toCenterX toCenterY

row

toCenterX toBottom

column

toCenterX toTop

column

toCenterX toCenterY

column

toCenterX toBottom

column

toCenterX toBetween

column

toCenterX toEvenly

column

toCenterX toAround