我试图在flowbite carousel的垂直和水平中心添加2个带有文本的h2标签，我无法获得良好的结果。
My classes (for testint):绝对top-500 left-500;甚至不改变文本在图像上显示的方式。真奇怪。
这里是旋转木马:
https://flowbite.com/docs/components/carousel/
这是整个html:
<div id="default-carousel" class="relative" data-carousel="static">
<!-- Carousel wrapper -->
<div class="overflow-hidden relative h-56 rounded-lg md:h-96">
<!-- Item 1 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full z-10" data-carousel-item="">
<img src="/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform -translate-x-full z-10" data-carousel-item="">
<img src="/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
</div>
<!-- Slider controls -->
<button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev="">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next="">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
我在第一张幻灯片中尝试了这个方法，文本被粘在幻灯片的顶部:
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="">
<div class="absolute top-500 left-500 px-4 py-2 opacity-100">
<h2 class="text-xl text-white font-bold text-center">Text 1 here</h3>
<h2 class="text-xl text-white font-bold text-center">Text 2 here</h3>
</div>
</div>
请帮忙，不胜感激。
谢谢!
您可以通过将包含标题的div中的absolute替换为relative并将top-1/2添加到相同的div中来添加两个h2标记。
代码
<script src="https://cdn.tailwindcss.com"></script>
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="">
<div class="relative top-500 top-1/2 px-4 py-2 opacity-100 ">
<h2 class="text-xl text-white font-bold text-center ">Text 1 here</h3>
<h2 class="text-xl text-white font-bold text-center ">Text 2 here</h3>
</div>
</div>请查看完整页面视图。
好的，这似乎工作完美，(它可以保留为绝对):
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
</div>