Saltar al contenido principal
Codigo Heroe
Desafío anterior
CSS Grid #4 / Práctica6/21
Volver al inicio del nivel
  1. 1. Propiedad de alineación horizontal I
  2. 2. Propiedad de alineación horizontal II
  3. 3. Posición horizontal de los elementos I
  4. 4. Posición horizontal de los elementos II
  5. 5. Posición horizontal de los elementos III
  6. 6. Propiedad de alineación vertical I
  7. 7. Propiedad de alineación vertical II
  8. 8. Posición vertical de los elementos I
  9. 9. Posición vertical de los elementos II
  10. 10. Posición vertical de los elementos III
  11. 11. Alineación de los elementos en ambos ejes I
  12. 12. Alineación de los elementos en ambos ejes II
  13. 13. Propiedad de alineación horizontal de un elemento
  14. 14. Posición horizontal de un elemento I
  15. 15. Posición horizontal de un elemento II
  16. 16. Propiedad de alineación vertical de un elemento
  17. 17. Posición vertical de un elemento I
  18. 18. Posición vertical de un elemento II
  19. 19. Alineación de un elemento en ambos ejes I
  20. 20. Alineación de un elemento en ambos ejes II
  21. 21. Alineación general con una excepción
Siguiente desafío
  • Matriz de skills

Cargando…
Estará listo en unos segundos.

  • Desafío

Propiedad de alineación vertical I

Replica el ejemplo modificando el código
DificultadFácil
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desafío</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-6.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="scene"> <div class="grid grid--cells"> <div class="brick brick--three"></div> <div class="brick brick--one"></div> </div> </main> </body> </html>
.grid { display: grid; grid-template-columns: 120px; grid-template-rows: 120px 120px; {{property}}: center; }
-1
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.

    Desafío completado

    Movimientos adicionales
    Continuar
    Codigo Heroe

    © 2023-2026, codigoheroe.com