0
260
ViewsMover bloques en html
ingrese la descripción de la imagen aquí . Quiero mover estos bloques al centro de la página. He usado html y tailwind css. He intentado justificar el centro pero no funciona. por favor ayuda.Aquí está el código html.[
<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>
·
Juan Pablo Isaza
1 answers
Answer question0
Agregue el centro de justificación a la clase donde los bloques completos tienen div padre, esa es la línea número 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> 
·
Juan Pablo Isaza
Report
Answer question