Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Alinear Izquierda y Derecha, Centrar

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Preparando el layout del proyecto y actividad Posicionando los enlaces

por Estudiante
| 59.9k xp | 434 posts

Alinear y Centrar Elementos en Flexbox

Alinear a la Izquierda o Derecha (Eje Principal)

  • Alinear a la Izquierda:

    • Usa justify-content: flex-start;

  • Alinear a la Derecha:

    • Usa justify-content: flex-end;

Centrar en el Eje Principal

  • Centrar Horizontalmente:
    • Usa justify-content: center;

Alinear Arriba o Abajo (Eje Transversal)

  • Alinear Arriba:

    • Usa align-items: flex-start;

  • Alinear Abajo:

    • Usa align-items: flex-end;

Centrar en el Eje Transversal

  • Centrar Verticalmente:
    • Usa align-items: center;

Ejemplo Práctico

Si deseas centrar los elementos tanto horizontal como verticalmente, puedes usar:

.contenedor {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
}
1 respuesta
por Brenda Souza
| 5006k xp | 18028 posts
Instructor Scuba

Hola Estudiante, espero que estés bien

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!