Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

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

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>

enter image description here

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs