Center
要素を上下左右中央揃えで配置するためのモジュールです。
<div class="l--center">...</div>主なProps
size: 指定した値がdata-sizeに出力されます。- （有効な値は
"cover"or"content"の2つ）
- （有効な値は
- その他、
<Grid>で使えるpropsが使えます。
Import
import { Center } from '@loos/lism-core';DEMO
Centerが高さを持たない場合は、コンテンツを水平方向に中央揃えで配置するだけとなります。 Centerに高さがある時、垂直方向に対しても中央揃えになります。
高さの設定が特にない時
TEXT
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
<Center p={30} gap={30}>
<Text fz="l">TEXT</Text>
<p>...</p>
<p>...</p>
</Center>水平方向の中央揃えだけでいい場合は、<Stack ai="center">でも可能です。
高さを設定した時
TEXT
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
<Center
h="50vh"
p={30}
gap={30}
>
<Text fz="l" fw="700">TEXT</Text>
<p>...</p>
<p>...</p>
</Center>水平方向の中央揃えを解除して、垂直方向のみ中央揃えにしたい場合は、<Center>の親要素に対してjustify-items:startを指定してください。
垂直方向のみ中央揃えに
TEXT
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
<Center
ji="start"
h="50vh"
p={30}
gap={30}
>
<Text fz="l" fw="700">TEXT</Text>
<p>...</p>
<p>...</p>
</Center>size の 指定について
size="cover"
<Cover size="cover">は<Center minW="100%" minH="100%">のエイリアスです。
<Center>が親要素のサイズに合わせて広がるようになります。
size="cover"
size="cover"
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Frame aspect="4/3" bgc="pale">
<Center size="cover" gap={30} p="box" bd>
<Text fz="l" fw="700">size="cover"</Text>
<p>...</p>
</Center>
</Frame>width, height ではなく min-width, min-height を指定しているのは、<Center>のコンテンツが親要素よりも大きくなった時にスクロールに問題が発生するためです。（詳しくは後述します）
size="content"
<Cover size="content">は<Center w="fit-content" h="fit-content" mx="auto">のエイリアスです。
<Center>のサイズは内部コンテンツに依存するようになり、<Center>自身が親要素に対して水平方向(inline方向)に中央揃えで配置されるようになります。
size="content"
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
💡
Center
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box bd isFlow>
<DammyText />
<Center size="content" p={20} bgc="blue:40%">
<Text ff="emoji">💡</Text>
<Text fw="700">Center</Text>
</Center>
<DammyText length="l"/>
</Box>内部を スクロール可 にしたい時の注意点
"画面サイズに余裕がある時は上下中央揃えにしたいが、内部のコンテンツが長くて画面サイズが小さい時にはみ出すのでスクロールできるようにしておく必要がある。"
という場合もあると思いますが、この時は少し注意が必要です。
gridやflexにalign-items:centerを適用させて上下中央揃えを実装する方法では、スクロール時に上端が見えなくなるという問題があります。
Lismの<Center> も grid を使ってるので、同じ問題が発生します。
以下のDEMOエリアをリサイズして挙動を確認してみてください。
...
DEMO
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.
<Center px={30} py={50} gap={30} h='45vh' ovy='auto' bd>
<Text fz='l' fw='700'>DEMO</Text>
<DammyText length='l' />
<DammyText length='xl' />
</Center>これを回避するには、親要素側に具体的な高さとoverflow-y:autoを指定し、<Center>はmin-height:100%を指定する、というアプローチが必要です。
(height:100%だとこれまたうまくいかないので注意)
...
DEMO
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.
<Box px={30} py={50} h='45vh' ovy='auto' bd>
<Center gap={30} minH='100%'>
<Text fz='l' fw='700'>DEMO</Text>
<DammyText length='l' />
<DammyText length='xl' />
</Center>
</Box>