l--center（真ん中に置く）

l--center は、中の要素を真ん中に置くためのクラスです。箱に高さがないときは横の真ん中に、高さがあるときは上下左右の真ん中にそろいます。

どんなときに使う？#

• 見出しや短い文章を、箱の中央に置きたいとき
• 画像の上に重ねた文字を、ちょうど真ん中に出したいとき
• アイコンや数字を、四角い枠の中央に入れたいとき

使い方#

真ん中に置きたい要素を l--center の箱で囲みます。箱に高さがないときは、横の真ん中にだけそろいます。

<div class="l--center -bd -p:30">
  <p class="-fz:l">文字</p>
</div>

中に複数の要素を入れると、縦に並んだうえで、それぞれが横の真ん中にそろいます。すきまは -g で空けます。

<div class="l--center -bd -p:30 -g:15">
  <p class="-fz:l">見出し</p>
  <p>短い文。</p>
  <p>長い文は、箱の幅いっぱいまで広がってから折り返します。</p>
</div>

上下左右の真ん中に置く#

箱に高さや縦横の比率（-ar:3/2 など。aspect-ratio）があると、縦の向きでも真ん中にそろいます。

<div class="l--center -bd -g:10 -ar:3/2">
  <p class="-fz:l">見出し</p>
  <p class="-fz:s">上下も左右も真ん中です。</p>
</div>

l--center のしくみ#

l--center が付ける CSS は次のとおりです。Grid の place-content と place-items を center にして、中身のかたまりと各要素の両方を中央に寄せています。

.l--center {
  display: grid;
  grid-template-columns: minmax(0, auto);
  place-content: center;
  place-items: center;
}

React・Astro で書く場合#

コンポーネントでは <Center> を使います。

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

<Center g="10" ar="3/2" bd>
  <Text fz="l">TEXT</Text>
</Center>

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

• l--grid（Grid で並べる）：要素を重ねて真ん中に文字を出す例
• l--frame（画像や動画の枠）：画像の上に文字を重ねる
• l--stack（縦に並べる）：縦に並べて横の真ん中にそろえる