英文:
Button overlay right middle of card image
问题
我正在使用NextJS和TailwindCSS制作博客。我已经创建了一个卡片，按钮位于卡片图像的正中央。但按钮保持略高。 图像：
以下是代码：
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
我尝试过使用绝对定位和相对定位。我还尝试过使用Flexbox，但都没有成功。我期望按钮将覆盖在图像的中央。
英文:
I'm making a blog using NextJS and TailwindCSS. I've made a card, that the button overlays the card image right in the middle. But the button stays a little higher. Image:
And here is the code:
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
I've tried using absolute and relative positions. I've also tried using flexbox. But nothing worked. I'm expecting that the button will overlay on the image right on the center.
答案1
得分: 0
这里有很多方法可以做到这一点，但我认为最简单的修复方法是，不要使用按钮的绝对定位，而是将flex items-center justify-center添加到按钮的父类中，像这样：
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
这将修复按钮的位置问题。
英文:
There are many ways to do this, but I think the easiest fix here is, instead of using absolute for the button, just add flex items-center justify-center to the parent class of button like this:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论