Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Uso de classes em DIVs

O primeiro com a classe dentro da DIV
<div class="mapa-conteudo" >
    <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d58501.868564676515!2d-46.653462045713255!3d-23.59117519782662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1salura%20sp!5e0!3m2!1spt-BR!2sbr!4v1588363199914!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>    
</div>

O segundo com a classe diretamente na TAG:
<iframe  class="mapa-conteudo" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d58501.868564676515!2d-46.653462045713255!3d-23.59117519782662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1salura%20sp!5e0!3m2!1spt-BR!2sbr!4v1588363199914!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

CSS
.mapa-conteudo{
     width: 940px;
    margin: 0 auto;
 }

Qual a diferente entre colocar a classe dentro da DIV ou dentro da TAG ? Por que altera o comportamento ?

2 respostas
solução!

Olá,

um iframe é um elemento de linha. Por isso ele não é centralizado com margin: 0 auto;

Coloque em seu css de mapa-conteudo a propriedade display: block;

Isso mesmo,ficou correto!

Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software