Object Position

Letakkan kandungan elemen diganti dalam bekas

Sintaks

layout="object-pos:[value]"

Nilai

Nilai	CSS Output	Huraian
center	object-position: center	Kedudukan tengah
top	object-position: top	Kedudukan atas
bottom	object-position: bottom	Kedudukan bawah
left	object-position: left	Kedudukan kiri
right	object-position: right	Kedudukan kanan
top-left	object-position: top left	Atas kiri
top-right	object-position: top right	Atas kanan
bottom-left	object-position: bottom left	Bawah kiri
bottom-right	object-position: bottom right	Bawah kanan

Contoh

<img layout="object:cover object-pos:top">Top positioned</img>

Pratonton

Kedudukan Objek

layout="object-pos:center" - Kawal di mana media diletakkan dalam bekas

top

center

bottom

Lihat Kod

<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div layout="object:[custom-value]">Custom</div>