Center
要素を上下左右中央揃えで配置するためのモジュールです。
主なProps
Section titled “主なProps”<Grid>で使えるpropsが使えます。
Import
Section titled “Import”import { Center } from 'lism-css/react';水平方向に中央配置
Section titled “水平方向に中央配置”Centerが高さを持たない場合は、コンテンツを水平方向に対して中央揃えで配置するだけとなります。
↓
高さの設定が特にない時
TEXT
リサイズ可能
<Center bd p='30'> <HTML.p fz='l'>TEXT</HTML.p></Center> ↓
長いテキストの改行は左寄せになります。テキストの読みやすさを損ないません。
TEXT
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
リサイズ可能
<Center bd p='30' g='15'> <HTML.p fz='l'>TEXT</HTML.p> <p>...</p> <p>...</p></Center>上下左右中央に配置する
Section titled “上下左右中央に配置する”Centerに高さやアスペクト比が設定されている時、垂直方向に対しても中央揃えになります。
↓
上下左右中央に配置
TEXT
Lorem ipsum dolor sit amet.
<Center g='10' ar='3/2' bd> <HTML.p fz='l'>TEXT</HTML.p> <HTML.p fz='s'>Lorem ipsum dolor sit amet.</HTML.p></Center>