Tailwind:图像顶部居中的 div

Posted

技术标签:

【中文标题】Tailwind:图像顶部居中的 div【英文标题】:Tailwind: Centered div on top of image 【发布时间】:2021-05-21 14:11:50 【问题描述】:

我有以下 html

<div>
<img src="">
<div><!-- centered form on top of the image --></div>
</div>

Here is how the layout should be

如何使用 Tailwind?解决方案必须是响应式的。我不想使用 background-image CSS 属性。我想改用&lt;img&gt; 标签

【问题讨论】:

【参考方案1】:

标记必须是这样吗?像这样的东西怎么样:

<div class="container mx-auto bg-gray-500 w-1/2 p-4 relative">
  <img src="http://placehold.it/300"  class="w-full h-auto">
  <div class="bg-red-300 w-1/2 h-1/2 absolute top-1/4 left-1/4 rounded-lg p-4">div</div>
</div>

现场观看:https://play.tailwindcss.com/IxHzcdTq1a

【讨论】:

以上是关于Tailwind:图像顶部居中的 div的主要内容,如果未能解决你的问题,请参考以下文章

当宽度未知时,将图像水平居中并将其垂直放置在 div 内的底部

在向左浮动的 div 中垂直居中图像

Tailwind:如何在导航栏父 div 中放置图像

CSS使div中的任何图像居中

tailwind css - 垂直和水平的 div

在 ASP.NET 中的 DIV 内水平和垂直居中图像