Center

Cập nhật lần cuối: 27/05/2022

Center là component để căn giữa phần tử theo chiều ngang.

Properties

Name	Type	Default	Description
andText	boolean	false	Center align the text too
children	React.ReactNode		ReactNode
gutters	string	null	The minimum space on either side of the content
intrinsic	boolean	false	Center child elements based on their content width
max	string	var(--measure)	The maximum width of the centered element

Example

Open Sandbox

import React from "react";
import { Page, Stack, ZBox, Center, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Center gutter='2rem'>
        <Stack space='2rem'>
          <div style={{ border: "solid 2px", height: "100px" }} />
          <div style={{ border: "solid 2px", height: "100px" }} />
          <div style={{ border: "solid 2px", height: "100px" }} />
          <div style={{ border: "solid 2px", height: "100px" }} />
        </Stack>
      </Center>
    </Page>
  );
}