中央配置のコンテナ。子要素を中央揃えすることも可能

Example#

Props#

NameTypeDefaultDescription
askeyof HTMLElementTagNameMap | ReactElement<ComponentType<FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote>>, string | JSXElementConstructor<...>>divレンダリングされるHTML要素
textCenterbooleanfalse内包するテキストを中央に配置。設定は継承され、子孫要素にも影響します
childrenCenterbooleanfalse子要素を中央に配置。孫要素には影響しません
maxWidthstringnone横幅の最大値
id
optional
string-HTMLのID属性の値
my
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mt
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-上方向のマージン。Spacing Tokenのキーを指定
mb
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
p
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
px
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
py
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pt
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-上方向のパディング。Spacing Tokenのキーを指定
pr
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pb
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pl
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
data-*
optional
string-Custom data attributes

Feature#

Webの基本は左寄せです。そのため、スポットで中央揃えを用いることで印象的に要素を配置することができます。

<Center>は様々な中央揃えをサポートしています。複数の要素をまとめて中央揃えするコンテナとして振る舞ったり、テキストのみを中央揃えしたり、子要素自体をセンタリングしたりすることもできます。

Usage#

  • childrenCenter propを指定した場合、<Center>はフレックスコンテナ(display: flex)となります
  • maxWidth propを指定しなかった場合、<Center>は水平方向を専有します(幅100%)となります。子要素のセンタリングのみを目的とする場合は、maxWidth propを指定しないでください