Sorgen Sie dafür, dass Div die verbleibende Höhe des übergeordneten Div in Tailwind CSS ausfüllt

Question

Ich möchte den König in die Mitte der Karte platzieren, aber wie mache ich das? Ich habe versucht, items-center in das zweite Div einzufügen, was nicht funktioniert hat, da das zweite Div nur die Höhe des Buchstabens K

hat.

<div class="bg-orange-200 w-48 h-48shadow-mdrounded-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

你的问题显然不清楚。让我为您提供完成任务的各种可能性。

<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

这种类型的布局使用网格更容易预测。因为 flex 会尝试填充可用空间的大小，而 grid 不会。

我举了两个例子，一个完全居中，无论图标如何，另一个考虑图标的位置和大小。

https://play.tai​​lwindcss.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>