How to add text right in the center of a flowbite carousel?-CodePudding

I am trying to add 2 h2 tags with text right in the vertical and horizontal center of a flowbite carousel, I cannot manage to get a good result.

My classes (for tesint): "absolute top-500 left-500" do not even make a difference to the way the text shows over the image. It is strange.

Here is the carousel:

https://flowbite.com/docs/components/carousel/

This is the entire html:


<div id="default-carousel"  data-carousel="static">
    <!-- Carousel wrapper -->
    <div >
         <!-- Item 1 -->
        <div  data-carousel-item="">
            <span >First Slide</span>
            <img src="/docs/images/carousel/carousel-1.svg"  alt="...">
        </div>
        <!-- Item 2 -->
        <div  data-carousel-item="">
            <img src="/docs/images/carousel/carousel-2.svg"  alt="...">
        </div>
        <!-- Item 3 -->
        <div  data-carousel-item="">
            <img src="/docs/images/carousel/carousel-3.svg"  alt="...">
        </div>
    </div>
    <!-- Slider indicators -->
    <div >
        <button type="button"  aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
        <button type="button"  aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
        <button type="button"  aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
    </div>
    <!-- Slider controls -->
    <button type="button"  data-carousel-prev="">
        <span >
            <svg aria-hidden="true"  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 >Previous</span>
        </span>
    </button>
    <button type="button"  data-carousel-next="">
        <span >
            <svg aria-hidden="true"  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 >Next</span>
        </span>
    </button>
</div>

I tried this in the first slide vua the text get stuck to the top of the slide:

            <div  data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit"  alt="">
                <div >
                    <h2 >Text 1 here</h3>
                    <h2 >Text 2 here</h3>
                </div>
               
            </div>

Any help would be appreciated please.

Thanks!

CodePudding user response：

You can add the two h2 tags by replacing the absolute with relative for the div containing heading and adding top-1/2 to same div.

This is the code

<script src="https://cdn.tailwindcss.com"></script>
<div  data-carousel-item="">
  <img src="https://placeimg.com/800/300/rabbit"  alt="">
  <div >
    <h2 >Text 1 here</h3>
    <h2 >Text 2 here</h3>

  </div>      
</div>

Please see the full page view.

CodePudding user response：

Ok got it, this seems to work perfectly, (it can be left as absolute):

<div  data-carousel-item="">
    <img src="https://placeimg.com/800/300/rabbit"  alt="...">
    <span >First Slide</span>
</div>