Boa noite a todos,
Estou com dificuldade em aplicar comando display: inline-block;.
Por exemplo....na aula rodapé, como que eu colocaria a imagem e o texto © Copyright Barbearia Alura - 2019 um do lado do outro, conforme a imagem exempl
Obrigado
Boa noite a todos,
Estou com dificuldade em aplicar comando display: inline-block;.
Por exemplo....na aula rodapé, como que eu colocaria a imagem e o texto © Copyright Barbearia Alura - 2019 um do lado do outro, conforme a imagem exempl
Obrigado
hoje, com a Alura e o Google Gemini
Fala Vinicius, tudo bem?
Uma imagem por padrão ja é display: inline-block;, então, caso utilize alguma tag p para o texto, que possuí um display: block;, será necessário aplicar o display inline-block para esse texto. Como por exemplo:
footer p {
display: inline-block;
}Caso não funcione, tente colocar inline-block em ambos. Mas caso ainda não funcione, por favor envie o seu código html e css por completo para te auxiliar melhor.
Aguardo sua resposta :D
Boa noite,
Não consegui....
segue abaixo os fontes utilizados
produtos.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="teste.css">
</head>
<body>
<main>
</main>
<footer>
<div class="div-footer">
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</div>
</footer>
</body>
</html>teste.css
footer div img{
display: inline-block;
}O correto seria colocar display: inline-block; no parágrafo:
footer div .copyright {
display: inline-block;
}
Para deixar apenas um do lado do outro:
.copyright {
display: inline-block;
}ou caso queira tudo centralizado
.div-footer {
display: flex;
align-items: center;
justify-content: center;
}Conseguiu resolver Vinicius Henrique?