I want to center the K in middle of the card, but how can I do that?
I tried putting items-center to second div didn’t work, because the second div is only height of letter K
<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>
2
Answers
this type of layout is more predictable with grid. because flex will try to fill the size it would take on the available space, whereas grid won’t.
I put two example, one fully centered regardless of the icon, and another one considering the placement and size of the icon.
https://play.tailwindcss.com/6M290nY1NT
Your question is apparently not clear. Let me give you various possibilities of getting things done.