Center
要素を上下左右中央揃えで配置するためのモジュールです。
主なProps
Section titled “主なProps”<Grid>で使えるpropsが使えます。
Import
Section titled “Import”import { Center } from 'lism-css';水平方向に中央配置
Section titled “水平方向に中央配置”Centerが高さを持たない場合は、コンテンツを水平方向に対して中央揃えで配置するだけとなります。
↓
高さの設定が特にない時
TEXT
リサイズ可能
<Center p='30'> <Text fz='l'>TEXT</Text></Center> ↓
長いテキストの改行は左寄せになります。テキストの読みやすさを損ないません。
TEXT
ロレムイプサムの座り雨。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
リサイズ可能
<Center p='40' g='20'> <Text fz='l'>TEXT</Text> <p>...</p> <p>...</p></Center>上下左右中央に配置する
Section titled “上下左右中央に配置する”Centerに高さやアスペクト比が設定されている時、垂直方向に対しても中央揃えになります。
↓
上下左右中央に配置
TEXT
Lorem ipsum dolor sit amet.
<Center g='10' ar='3/2' lh='xs'> <Text fz='l'>TEXT</Text> <Text fz='s'>Lorem ipsum dolor sit amet.</Text></Center>