CODEWITHSUNDEEP
cssbuttontailwind-css
just a user
just a user

Reputation: 39

Align button to right of image without disrupting layout with Tailwind

I am creating an overlay and I want to have a close button next to the image, but I don't want the image to be off-center without using absolute positioning. I just can't figure out how to do it.

https://play.tailwindcss.com/MPIT7SvmPe

Upvotes: 0

Views: 2550

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3905

You can make use of following code

<script src="https://cdn.tailwindcss.com"></script>
<div class="fixed inset-0 bg-gradient-to-b from-black via-black to-white flex flex-col text-center items-center justify-center text-white">
  <div class="w-auto flex justify-center items-center gap-4 pl-10">
    <img src="https://images.unsplash.com/photo-1624582576119-04eff55af62c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y2hhcmxvdHRlc3ZpbGxlJTIwdmlyZ2luaWF8ZW58MHx8MHx8&auto=format&fit=crop&w=900&q=60" alt="Placeholder" class="h-[358px] w-[358px] rounded-2xl object-cover" />
    <button
      type="button"
      class="text-white border-2 border-white rounded-full outline-none px-3 py-2"
    >
      X
    </button>
  </div>
  <h1 class="text-4xl font-[visuelt-bold-pro] mt-4">Placeholder</h1>
  <p class="mt-3">
    This is some placeholder content.
    <br />
    Will be replaced soon.
  </p>
</div>

Upvotes: 0

Gabe
Gabe

Reputation: 2636

You can add a padding to the left side e.g. p-12 and make the button w-10. And add a gap-2. Now the picture will have a invisible padding on the left and a space with the button on the right, both with the same with of 12. This makes that the image stays centered.

Example: https://play.tailwindcss.com/QGAepXGwhd

Hope this helps.

Upvotes: 1

Related Questions