Jadikan div mengisi baki ketinggian div induk dalam CSS Tailwind

Question

Saya mahu meletakkan Raja di tengah-tengah kad, tetapi bagaimana saya melakukannya? Saya cuba meletakkan item-center ke dalam div kedua yang tidak berfungsi kerana div kedua hanyalah ketinggian huruf K

<div class="bg-oren-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my -10">
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

Answer 1

Soalan anda jelas tidak jelas. Izinkan saya menyediakan anda dengan pelbagai kemungkinan untuk menyelesaikan tugas anda.

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="h-min w-full bg-slate-200 text-center text-5xl font-bold">k</div>
  </div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-slate-200 text-5xl font-bold">k</div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="flex h-min bg-slate-200 text-5xl font-bold">k</div>
  </div>
</div>

---

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-slate-200 text-center text-5xl font-bold">k</div>
</div>

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-transparent"><div class="w-full bg-slate-200 text-center text-5xl font-bold">k</div></div>
</div>

Answer 2

Jenis susun atur ini lebih mudah diramal menggunakan grid. Kerana flex akan cuba mengisi ruang yang ada, grid tidak akan.

Saya memberikan dua contoh, satu berpusat dengan sempurna tanpa mengira ikon dan satu lagi mengambil kira kedudukan dan saiz ikon.

https://play.tailwindcss.com/6M290nY1NT

<!-- this is your example -->
<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- fully centered -->
<div class="grid items-center bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="[grid-area:1/1] self-start justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class="[grid-area:1/1] bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- kinda centered -->
<div class="grid items-center [grid-template-rows:auto_1fr] bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class=" justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class=" bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>