Como faço para centralizar uma imagem dentro de uma div?
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
Como faço para centralizar uma imagem dentro de uma div?
Rodrigo temos várias maneira para isso,
Adicione a regra css, serve para imagens também:
text-align: center;
`Ou adicione margins laterais auto;
margin: 0 auto;Espero ter ajudado
Matheus, tentei das duas formas e nada . . .
Poste seu HTML e CSS, para que eu possa ver a estrutura.
Rodrigo, se te ajudar segue exemplo:
<!DOCTYPE html>
Desculpe, saiu errado na última resposta... segue exemplo correto:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#imagem{
text-align: center;
}
</style>
</head>
<body>
<div id="imagem">
<img src="foto.jpg" />
</div>
</body>
</html>André a imagem ja esta posicionada no centro da div, você queria posicionar ela no centro da página ?
Boa noite, Matheus!
Apenas coloquei em código o que você explicou acima, tentando ajudar ao Rodrigo.
Abraço! =D
Entendi, vamos ficar no aguardo do Rodrigo para ver se ele conseguiu.
Matheus e Andre, no código está assim. Será que to comendo bola em algo? rs. Tudo bem eu referenciar a img que pertence a uma classe sport ou seria melhor colocar um id no img?
...
.sport img { width: 449px; height: 300px; text-align: center; }
Poxa, não sei como colocar o código aqui. E sem querer marquei como solucionado, ainda não solucionei rs
Coloque o código entre três ` (crase) assim:
```
E outra aqui no final, tudo que estiver dentro das crases será formatado.
Valeu Guylherme!
Agora sim, Matheus e Andre, no código está assim. Será que to comendo bola em algo? rs. Tudo bem eu referenciar a img que pertence a uma classe sport ou seria melhor colocar um id no img?
HTML
<section class="sport"><br>
<img src="img/CTS/CTS_logo.jpg" id="foto"><br>
<p>... </p><br>
</section>CSS
.sport img {
width: 449px;
height: 300px;
text-align: center;
}Rodrigo para resolver o problema basta apenas trocar o elemento que esta recebendo o text-align:
Seu código:
.sport img {
width: 449px;
height: 300px;
text-align: center;
}Mude para:
.sport {
text-align: center;
}
.sport img {
width: 449px;
height: 300px;
}Pois quem deve receber o align é o elemento pai da imagem.
Hum, entendi. Deu certo hehe Valeu de novo Matheus! ;) Valeu também André!
De nada, sempre que precisar não deixe de criar suas dúvidas.