Center (l--center)

l--center は、要素を上下左右中央揃えで配置するためのクラスです。

CSS

.l--center {
  display: grid;
  place-content: center;
  place-items: center;
}

Lismコンポーネント

Import

import { Center } from 'lism-css/react';

Usage

水平方向に中央配置

Centerが高さを持たない場合は、コンテンツを水平方向に対して中央揃えで配置するだけとなります。

↓

高さの設定が特にない時

TEXT

リサイズ可能

<Center bd p="30">
  <Text fz="l">TEXT</Text>
</Center>

↓

長いテキストの改行は左寄せになります。テキストの読みやすさを損ないません。

TEXT

ロレム・イプサムの座り雨。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ可能

<Center bd p="30" g="15">
  <Text fz="l">TEXT</Text>
  <p>ロレム・イプサムの座り雨。</p>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</p>
</Center>

<div class="l--center -bd -p:30 -g:15">
  <p class="-fz:l">TEXT</p>
  <p>ロレム・イプサムの座り雨。</p>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</p>
</div>

上下左右中央に配置する

Centerに高さやアスペクト比が設定されている時、垂直方向に対しても中央揃えになります。

↓

上下左右中央に配置

TEXT

ロレム・イプサムの座り雨。

<Center g="10" ar="3/2" bd>
  <Text fz="l">TEXT</Text>
  <Text fz="s">ロレム・イプサムの座り雨。</Text>
</Center>