Kevin Powell - Community•11mo ago

how to center a div, with a child element that has been moved with position relative?

I have a div with 2 child elements (h2, img) i have moved the image to left so the text overlap a bit, but now the div with these 2 elements looks off centered, how could i fix it?

<div class="flex flex-col sm:flex-row items-center ">
        <h2
            class="sm:textstroke text-5xl sm:text-6xl md:text-7xl lg:text-8xl max-w-[1200px] mx-auto w-full text-center font-semibold md:mt-0 px-0 pb-1 z-10"
        >
            <span class="text-car360yellow textborder">De Gearhead</span>   <br>
            <span class="text-car360blue textborder">para</span><br>
            <span class="text-car360lightblue textborder">Gearhead</span>
        </h2>
        <img  src="/assets/duplaa.png" alt="Pedriali e Caio" class=" w-[600px] rounded-lg sm:relative sm:left-[-180px] " >
    </div>

<div class="flex flex-col sm:flex-row items-center ">
        <h2
            class="sm:textstroke text-5xl sm:text-6xl md:text-7xl lg:text-8xl max-w-[1200px] mx-auto w-full text-center font-semibold md:mt-0 px-0 pb-1 z-10"
        >
            <span class="text-car360yellow textborder">De Gearhead</span>   <br>
            <span class="text-car360blue textborder">para</span><br>
            <span class="text-car360lightblue textborder">Gearhead</span>
        </h2>
        <img  src="/assets/duplaa.png" alt="Pedriali e Caio" class=" w-[600px] rounded-lg sm:relative sm:left-[-180px] " >
    </div>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

how to center a div, with a child element that has been moved with position relative?