Center
View on GitHub: Copmonent
View on GitHub中央配置のコンテナ。子要素を中央揃えすることも可能
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| as | 'HTMLの要素名'Box | 'div' | レンダリングされるHTML要素 |
| childrenCenter optional | boolean | - | 子要素を中央に配置。孫要素には影響しません |
| data-* optional | string | - | Custom data attributes |
| id optional | string | - | HTMLのID属性の値 |
| maxWidth optional | 'none''cap''ch' | - | 最大幅 |
| minWidth optional | 'auto''cap''ch' | - | 最小幅 |
| p optional | 'xxs''xs''sm' | - | 四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pb optional | 'xxs''xs''sm' | - | 下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pl optional | 'xxs''xs''sm' | - | 左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pr optional | 'xxs''xs''sm' | - | 右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pt optional | 'xxs''xs''sm' | - | 上方向のパディング。Spacing Tokenのキーを指定 |
| px optional | 'xxs''xs''sm' | - | 水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| py optional | 'xxs''xs''sm' | - | 垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| textCenter optional | boolean | - | 内包するテキストを中央に配置。設定は継承され、子孫要素にも影響します |
| width optional | 'auto''cap''ch' | - | 幅を指定 |
Feature#
Webの基本は左寄せです。そのため、スポットで中央揃えを用いることで印象的に要素を配置することができます。
<Center>は様々な中央揃えをサポートしています。複数の要素をまとめて中央揃えするコンテナとして振る舞ったり、テキストのみを中央揃えしたり、子要素自体をセンタリングしたりすることもできます。
Usage#
childrenCenterpropを指定した場合、<Center>はフレックスコンテナ（display: flex）となりますmaxWidthpropを指定しなかった場合、<Center>は水平方向を専有します（幅100%）となります。子要素のセンタリングのみを目的とする場合は、maxWidthpropを指定しないでください