Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

Consulta sobre <li>, css y posicionamiento

Hola como va? Estoy trabajando en el challenge y me estoy complicando para lograr que estos elementos me aparezcan centrados. También me gustaría saber si es posible que queden cuadrados mediante alguna instrucción. Abajo con las capacitaciones lo logré editando el tamaño de las mismas y ajustando los márgenes. imagen de ejemploAcá lo ajusté modificando las imágenes y editando margenes

3 respuestas

Hola José Matías, espero que esté bien.

Una forma que puedes hacer para lograr que estos elementos aparezcan centrados es poner todos los elementos de la tag <ul> y de la tag <li> con margin: 0 auto y todavía usar display: flex y justify-content: center en la <ul>para centrar los <li>. (como en la imagen abajo):

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad.

Pero te pido que compartas con nosotros tu código HTML y CSS para que podamos probarlo y darte una respuesta más precisa.

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

Hola María, gracias por responder. Me sirvió lo que comentaste. Te comparto el código por git porque no me deja añadir tantos caracteres. Este es git de mi porfolio

Aún me queda ver como hago que las skills y hobbies queden en cuadrados perfectos. Me vi en muchas ocasiones editando valores a mano para ver que quede bien. Calculo que eso es contraproducente para cuando alguien lo vea en alguna pantalla de otro tamaño y ni hablar en otro dispositivo. Elementos ya centrados :D

solución!

Hola José,

Practicando y haciendo ejercicios, te comprenderás mejor.

Acerca del tamaño de la pantalla y la capacidad de respuesta del sitio, para eso usamos el media querie del css y este es un tema que se discutirá más adelante en la ruta de Front End.

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