skip to Main Content

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>

Image

2

Answers


  1. 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

    <!-- 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>
    
    Login or Signup to reply.
  2. Your question is apparently not clear. Let me give you various possibilities of getting things done.

    enter image description here

    
    <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>
    
    

    enter image description here

    <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>
    
    

    enter image description here

    <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>
    
    
    


    enter image description here

    <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>
    
    

    enter image description here

    <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>
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search