如何用Tailwind CSS实现图片居中并添加右下角圆角文本框

直接给你可行的修改方案，核心是让外层相对定位容器的宽度适配图片，同时保持整体居中：

修改后的代码：

<div className="relative max-w-fit mx-auto">
  <img className="rounded-lg" src={imageURL} alt="" />
  <div className="absolute bottom-0 right-0 h-16 w-16 rounded-full bg-red-500 flex items-center justify-center">
    Book a Ticket
  </div>
</div>

关键调整点：

• 给外层div加max-w-fit：让容器宽度自动贴合图片的实际宽度，这样绝对定位的按钮就会锚定在图片右下角，而非屏幕最右侧。
• 保留外层div的mx-auto：因为max-w-fit让容器宽度小于父级容器，mx-auto可以正常生效，实现图片和按钮整体居中。
• 给按钮div加flex items-center justify-center：让文本在圆形按钮内水平垂直居中，满足文本居中的需求。

内容的提问来源于stack exchange，提问作者Bishal Kar