css 如何将图像居中并将文本放置在图像的右下角，并使用圆角文本

nbysray5 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(159)

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

这是一个顺风CSS代码。我怎样才能使图像的中心和地方与预订票文本的div在图像的右下角？然后我想把div中的文本四舍五入。？
外部div是全宽的，所以内部div被放置在屏幕的最右边。如果我们做外部div内联块。mx-auto不工作了现在我们的图像不再居中了。
我们该怎么办

css

来源：https://stackoverflow.com/questions/76415459/how-to-center-the-image-and-place-text-on-right-bottom-corner-of-the-image-with

1条答案

按热度按时间

cbwuti441#

为此，您需要添加flex类，并使用justify-center和items-center将其内容水平和垂直居中。
另外，book a ticket部分div现在有一个额外的flex justify-centeritems-center类。这将使文本在div中水平和垂直居中。
book a ticket div中的文本被 Package 在一个带有rounded-full类的span元素中。这将使文本在圆形div中显示为圆形。

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

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何将图像居中并将文本放置在图像的右下角，并使用圆角文本

1条答案

相关问题

热门标签

最新问答