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

Posicionamento de blocos de informações HTML/CSS

Olá Time!

Estou com problemas para entender sobre posicionamento de blocos no CSS. Sou totalmente iniciante tentei ver mais de 4 vídeos sobre o assunto mas realmente não saio do lugar.

Estou criando um site básico e há problemas em meu Header. Criei um menu a direita, nele há três itens. Não consigo posicionar ele de forma centralizada, acaba que sempre fica um pouco mais para cima dentro do posicionamento da imagem.

Tentei utilizar a propriedade float: left para posiciona-lo a direita mas não sei se isso é o correto a se fazer neste cenário.

Minha dúvida é, como eu devo posicionar corretamente a direita o bloco "menu-cabecalho" e como posicionar centralizado verticalmente. Ou seja, que esteja a direita e no centro vertical.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

        <title>Home - Gustavo da Hora</title>
    </head>

    <body>
        <header>
            <div class="cabecalho">
                <img src="fotoDePerfil.png" class="imagem-cabecalho">

                <ul class="menu-cabecalho">
                    <li><a href="index.html" class="menu-item">Home</a></li>
                    <li><a href="index.html" class="menu-item">Formações</a></li>
                    <li><a href="index.html" class="menu-item">Contato</a></li>
                </ul>
            </div>
        </header>
    </body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}

.cabecalho {
    background: #191970;
    padding: 50px;
}

.imagem-cabecalho {
    display: inline-block;
    width: 50px;
}

.menu-cabecalho {
    display: inline-block;
    float: right;
}

.menu-item {
    color: black;
    background: #4682B4;
}

header li {
    display: inline;
    text-align: right;
}

Já consegui compreender o display: inline e inline-block, mas as propriedades de posicionamento não consegui captar.

Aguardo ajuda após horas pesquisando, valeu!

1 resposta
solução!

Olá, Gustavo! Tudo bom? Criei esse pen com o seu código para você dar uma olhada. Nele, utilizei display: flex para posicionar os itens. O problema do float é que ele mexe com todo o fluxo da página, usando o flex ele altera só o que está dentro do elemento que você adicionou o flex.

Gosto bastante dessa folha de cola de flexbox e temos um curso sobre flexbox aqui na plataforma também.

Espero ter ajudado, quaisquer dúvidas estou à disposição!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software