Duvida : Centralizar hyperlink contendo imagem junto em um cabeçalho.

JavaScript

HTML5

CSS3

07/03/2020

Como consigo reproduzir este efeito?

>>> queria que ficasse assim: https://imgur.com/A5u0EPH
>>> ele fica descentralizado: https://imgur.com/a/KylV2Ry

Meu código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<meta lang="pt-BR">
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/display.css">
</html>
<body>
<header>
<div class="header-container">
<div class="header-element">
<a href="assets/img/wpp.png"><img src="assets/img/wpp.png" alt="wpp.png">
FALE CONOSCO PELO WHATSAPP
</a>
</div>
</div>
</header>
</body>

<bolder>Meu código CSS:</bolder>
.header-container{
width: 100%;
height: 10vh;
background-color: #dcdcdc;
position: relative;
}
.header-element{
float: left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-element img{
float: left;
width: 30px;
height: 5vh;
}
Danton

Danton

Curtidas 0

Respostas

Felipe Carvalho

Felipe Carvalho

07/03/2020

Olá. Dei uma arrumada na sua estrutura HTML e um tapa no visual do seu CSS,
veja se ficou do modo que procura!

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="_style/index.css">
</head>
<body>
<header>
<div class="header-container">
<div class="header-element">
<a href="">
<img src="" alt="Imagem">
Fale conosco via WhatsApp
</a>
</div>
</div>
</header>
</body>
</html>

CSS:

@charset="UTF-8";

.header-container
{
width: 100%;
height: 10vh;
background-color: #dcdcdc;
position: relative;
}
.header-element
{
position: relative;
float: left;
width: 100%;
justify-content: space-around;
display: flex;
}

Observação: Lembre-se de linkar corretamente a imagem na tag IMG e suas folhas de estilo na tag Head da sua página HTML .
Boa sorte, =D.
GOSTEI 0
POSTAR