Como faço para centralizar uma imagem dentro de uma div?
Solucionado
Como faço para centralizar uma imagem dentro de uma div?
hoje, com a Alura e o Google Gemini
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.