CODEWITHSUNDEEP
csstailwind-css
user824624
user824624

Reputation: 8080

how to put the content in the vertical center in tailwind

I am using tailwind to make a component as below

enter image description here

how to make the button in the vertical middle / center instead of positioning on the top.

<div class="flex flex-grow mb-4">
  <div class="w-12">
    <i  class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
  </div>

  <div class="w-96 border-gray-400 flex flex-row">
    <div class="transition duration-500 shadow ease-in-out transform hover:-translate-y-1 hover:shadow-sm select-none cursor-pointer bg-white dark:bg-gray-800 rounded-md flex flex-1 items-center p-4 hover:border hover:border-blue-400">
        <div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
            <a href="#" class="block relative">
                <img alt="profil" src="https://www.tailwind-kit.com/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 "/>
            </a>
        </div>
        <div class="flex-1 pl-1 ">
            <div class="font-medium dark:text-white">
                jake li
            </div>
            <div class="text-gray-600 dark:text-gray-200 text-sm">
                2022.1.11
            </div>
        </div>
        <div class="text-gray-600 dark:text-gray-200 text-xs">
        
        </div>
        <button class="w-12 text-right flex justify-end opacity-0 hover:opacity-100">
        </button>
    </div>
</div>

Upvotes: 0

Views: 269

Answers (1)

Valter Martins
Valter Martins

Reputation: 26

A little out of context, so here's a quick change for the button.

From:

    <div class="w-12">
      <i  class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
    </div>

To:

    <div class="w-12 self-center text-center">
      <i  class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
    </div>

Or:

    <div class="w-12 flex items-center justify-center">
      <i  class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
    </div>

You can test at https://play.tailwindcss.com and see if that's what you're looking for.

There are other details but for now that seems enough for the current question.

Upvotes: 1

Related Questions