Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Posicionar imagem no header

Caros,

Resolvi incluir alguns itens no meu header como por exemplo 2 imagens uma do facebook e uma do instagram, mas não estou conseguindo alinhar, como eu deveria proceder?

        <header>
            <div class="caixa">
                <h1>
                    <img src="../images/produtos/logo-branco.png">
                </h1>
                    <nav>
                        <ul>
                            <li><a href="../html/home.html">Home</a></li>
                            <li><a href="../html/produtos.html">Produtos</a></li>
                            <li><a href="../html/contatos.html">Contato</a></li>
                            <li><a href="www.facebook.com"><img src="https://static.wixstatic.com/media/81af6121f84c41a5b4391d7d37fce12a.png/v1/fill/w_45,h_45,al_c,q_85,usm_0.66_1.00_0.01/81af6121f84c41a5b4391d7d37fce12a.webp"></a></li>
                            <li><a href="www.instagram.com"><img src="https://static.wixstatic.com/media/23fd2a2be53141ed810f4d3dcdcd01fa.png/v1/fill/w_45,h_45,al_c,q_85,usm_0.66_1.00_0.01/23fd2a2be53141ed810f4d3dcdcd01fa.webp"></a></li>
                        </ul>
                    </nav>
            </div>
        </header>

nav {
    position: absolute;
    top: 110px;
    right: 0px;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}
1 resposta
solução!

Oi, tudo bem? Tenta isso da daqui:

nav ul {
  display: flex;
  align-items: center
}

O display flex torna o elemento um flex container automaticamente transformando todos os seus filhos diretos em flex itens.

O align-items alinha os flex itens de acordo com o eixo do container.

Recomendo bastante você dar uma lida sobre Flexbox.

O site FleboxFroggy tem um joguinho muito bom para práticar o uso das propriedades do flexbox.

Enfim, espero ter ajudado. =D