I want my grid items to start from the center instead of from the left. So I used justify-items-center
:
<div class="bg-gray-100 grid grid-cols-4 justify-items-center gap-2 rounded p-3 md:grid-cols-8">
<div class="aspect-w-1 aspect-h-1 border-border group relative w-full overflow-hidden rounded border pb-7">
<button class="bg-foreground text-background hover:shadow-dark absolute right-1 top-1 z-10 rounded-full p-1 opacity-0 shadow transition-opacity duration-200 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x">
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg></button
><img src="https://via.placeholder.com/150" alt="Preview 1" class="h-full w-full object-contain" />
<div class="border-border bg-background absolute bottom-0 flex h-7 w-full items-center justify-center gap-2 overflow-hidden border-t p-2 text-xs"><span class="truncate text-ellipsis whitespace-nowrap">placeholder1.jpg</span></div>
</div>
<div class="aspect-w-1 aspect-h-1 border-border group relative w-full overflow-hidden rounded border pb-7">
<button class="bg-foreground text-background hover:shadow-dark absolute right-1 top-1 z-10 rounded-full p-1 opacity-0 shadow transition-opacity duration-200 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x">
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg></button
><img src="https://via.placeholder.com/200" alt="Preview 2" class="h-full w-full object-contain" />
<div class="border-border bg-background absolute bottom-0 flex h-7 w-full items-center justify-center gap-2 overflow-hidden border-t p-2 text-xs"><span class="truncate text-ellipsis whitespace-nowrap">placeholder2.png</span></div>
</div>
</div>
https://play.tailwindcss.com/c8UlMODGNC
However, the items are still starting from the left:
What am I doing wrong?
Note: I also tried place-content-center
. No luck.
You need to sign in to view this answers
Leave feedback about this