Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, Anderson. Tudo bem?
Para alinhar uma imagem no HTML e CSS, você tem várias opções dependendo do tipo de alinhamento que deseja (centralizado, à esquerda, à direita, etc.). Vou te mostrar como fazer isso utilizando o Flexbox.
<div class="image-container">
<img src="https://br.web.img3.acsta.net/pictures/19/09/18/13/46/0198270.jpg" alt="Descrição da imagem">
</div>
.image-container {
display: flex;
justify-content: center; /* Alinha horizontalmente */
align-items: center; /* Alinha verticalmente */
height: 100vh; /* Altura do contêiner, ajustável conforme necessário */
}
.image-container img {
max-width: 100%; /* Para garantir que a imagem não ultrapasse o contêiner */
height: auto; /* Mantém a proporção da imagem */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alinhamento de Imagem</title>
<style>
.image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #0000FF; /* Cor de fundo azul */
}
.image-container img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://br.web.img3.acsta.net/pictures/19/09/18/13/46/0198270.jpg" alt="Descrição da imagem">
</div>
</body>
</html>
Um abraço e bons estudos.