como puedo alinear una imagen en el centro y un nav al final en un header con flexbox ![]( lo intente hacer con el siguiente codigo pero ...

carlos edgardo trillos baron

Pregunta

student•hace 4 años

como puedo alinear una imagen en el centro y un nav al final en un header con flexbox

![](

lo intente hacer con el siguiente codigo pero al reducir la pantalla se sobre pone.

![](

<body>
    <header>
        <figure class="img_Header">
            <img src="./img/header.png" alt="">
        </figure>
        <nav class="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Libros</a></li>
                <li><a href="">Juegos</a></li>
                <li><a href="">GamePlay</a></li>
            </ul>
        </nav>

    </header>
    <main class="main">
        <aside>

        </aside>
        <section class="section">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, vitae iste dicta maxime consectetur libero labore excepturi debitis sapiente facilis in autem hic, molestiae quisquam. Ipsam labore iste consequatur iure.

        </section>
    </main>
    <footer>

    </footer>
</body>```

box-sizing: border-box;

margin:0;

padding: 0;

}

header{

background-color: yellow;

height: 150px;

display:flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}

.img_Header img{

width:200px;

}

.nav{

position: absolute;

text-decoration: none;

right:0;

margin-top: 50px;
margin-right: 10px;

}

.nav li{

display:inline-block

}

main{

height: 400px;

display:flex;

}

aside{

width: 500px;

height: 400px;

background-color: brown;

}

section{

height: 400px;

background-color: cornflowerblue;

}

footer{

height: 150px;

background-color: cyan;

}```

Audiel Martinez

student•hace 4 años

hola Carlostrillosbaron Te dejo mi código creo que eso es lo que buscas

resultado

código CSS

como puedo alinear una imagen en el centro y un nav al final en un header con flexbox ![]( lo intente hacer con el siguiente codigo pero ...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]