Question

0

321

Vistas

Move blocks in html

enter image description hereI want to move these blocks in the centre of the page.I have used html and tailwind css.I have tried justify-centre but its not working. please help.Here's the html code.[

<main>
        <div class="justify-center items-center">
            <div class="bg-blue-200 py-20 text-center">
                <!-- grid -->
                
                <div class="flex">
                    <div>
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
                    </div>
                    <div>
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
                    </div>
        
                    <div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
        
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
                        <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T01:25:45.223Z

Add justify-center to the class where whole blocks have parent div, that is line number 4

 <main>
  <div class="justify-center items-center">
    <div class="bg-blue-200 py-20 text-center">
      <!-- grid -->

      <div class="flex justify-center">
        <div>
          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>

          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>

          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
        </div>
        <div>
          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>

          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>

          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
        </div>

        <div>
          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>

          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
          <div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
        </div>
      </div>
    </div>
  </div>
</main>

0

321

Move blocks in html

1 Respuestas

0

Encuentra empleos remotos

Andres GPT