将按钮对齐到图像的右侧，而不破坏Tailwind的布局

Question

我正在创建一个叠加，我想在图像旁边有一个关闭按钮，但我不希望图像在没有使用绝对定位的情况下偏离中心。我就是想不出该怎么做。

https://play.tailwindcss.com/MPIT7SvmPe

Answer 1

您可以在左侧添加填充，例如p-12，并使按钮为w-10。然后加入一个gap-2。现在，图片将在左侧有一个不可见的填充，在右侧有一个带有按钮的空格，两者的宽度都是相同的12。这使得图像保持居中。

示例:https://play.tailwindcss.com/QGAepXGwhd

希望对你有帮助。

Answer 2

您可以使用以下代码

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