Center
A module for centering elements both horizontally and vertically.
CSS
Main Props
You can use any props available on <Grid>.
Import
import { Center } from 'lism-css/react';Usage
Horizontal centering
When Center has no height, it simply aligns its content horizontally centered.
↓
When no height is set
TEXT
リサイズ可能
<Center bd p='30'> <HTML.p fz='l'>TEXT</HTML.p></Center> ↓
Long text wraps left-aligned, preserving readability.
TEXT
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
リサイズ可能
<Center bd p='30' g='15'> <HTML.p fz='l'>TEXT</HTML.p> <p>...</p> <p>...</p></Center>Centering both horizontally and vertically
When Center has a height or aspect ratio set, content is also centered vertically.
↓
Centered both horizontally and vertically
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>