Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Portafolio sección Formación académica

Hola buena tade, tengo duda en como alinear una secció del challenge del portafolio.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad seria esa parte de la lista.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadQuiero que quede asi:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadadjunto codigo HTML

 <section class="academic" id="formacion">
        <h2 class="academic__title" >Formación académica</h2>
        <div class="academic__courses">
            <div class="academic__courses__box">
                <ul class="academic__courses__list">
                    <!-- Pon el logotipo de la institución de formación -->
                    <li class="academic__courses__item__img"><img src="assets\ufpr_logo.png"></li>
                    <li class="academic__courses__item__title"><h4>Análisis de datos</h4></li>
                    <li class="academic__courses__item__subtitle"><p>2018 - UFPR</p></li>
                </ul>
            </div>
            <div class="academic__courses__box">
                <ul class="academic__courses__list">
                    <!--Pon el logotipo de la institución de formación -->
                    <li class="academic__courses__item__img"><img src="assets\alura_logo.png"></li>
                    <li class="academic__courses__item__title"><h4>Formación en UX Design</h4></li>
                    <li class="academic__courses__item__subtitle"><p>2019 - Alura</p></li>
                </ul>
            </div>
            <div class="academic__courses__box">
                <ul class="academic__courses__list">
                    <!-- Pon el logotipo de la institución de formación -->
                    <li class="academic__courses__item__img"><img src="assets\ufrj_logo.png"></li>
                    <li class="academic__courses__item__title"><h4>Posgrado en diseño</h4></li>
                    <li class="academic__courses__item__subtitle"><p>En curso - UFRJ</p></li>
                </ul>
            </div>
        </div>
    </section>

CSS

section.academic{
    padding: 32px;
    margin-left: 118px;
    margin-right: 118px;
}

.academic__title{
    text-align: center;
}

.academic__courses{
    display: flex;
    justify-content: space-around;
}

.academic__courses__box{
    height: 177px;
    width: 303px; 
    background-color: var(--cor-de-Cuadro);
}
 
.academic__courses__item__img{
    display:flex;
    justify-content: center;
}
1 respuesta

¡Hola Alexis, espero que estés bien!

Para alinear la sección de formación académica en tu portafolio, puedes utilizar la propiedad "align-items" del contenedor flex. En este caso, dado que estás utilizando "display: flex" en ".academic__courses", puedes añadir la siguiente regla CSS:

.academic__courses {
  display: flex;
  justify-content: space-around;
  align-items: center; /* Añade esta línea */
}

Al añadir "align-items: center", los elementos dentro de ".academic__courses__box" se alinearán verticalmente en el centro, logrando el efecto que deseas.

Espero que esta solución te ayude a resolver tu duda. Si necesitas más ayuda, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!