Question

0

194

Views

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>

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

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>