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!
