Centrar imagem no inteiror da tag <p>

Bom dia, é só mudar o css da sua tag p para:

p img {

	    display: block;

	    margin: 0 auto;

	}

	Veja o exemplo no codepen abaixo:

O parametro display: block é para que?

Obrigado

Como o nome diz cria um bloco (que vai ocupar toda a largura disponível 'width'), uma espécie de divisão que vai separar o parágrafo do que estiver acima e  abaixo.

Tentei fazer o mesmo para a tag iframe:

iframe {

  display: block;
  margin: 0 auto;
}

	Acontece que em ecrãs mais pequenos, em mobile, a tag iframe "salta" fora, resultando num barra de rolagem na horizontal. Isso tem haver com o CSS que estou a utilizar. Antes tinha bootstrap e não tinha esse problema. Existe maneira de adaptar via css, sem recurso a uma framework responsive?

	 

	Obrigado

Assim não funciona?

<style>
/Sem colocar estilo para a imagem/
p {

 border: red;
 background-color: red;
 display: block;
 text-align: center;
}
</style>

<h1>

</h1>

<p>
 <img src='http://lorempixel.com/400/200/' alt='photo_bestQuality' />
</p>

É assim, o que está fazendo é atribuir à tag <p> um display: block, portanto, está tornando todo o paragrafo num bloco.

	Depois faz com que tudo o que esteja escrito no interior do paragrafo fique centrado. Neste caso o parametro block não está a fazer nada para a imagem. Pois quem trata a imagem é o parametro text-align. O display block apenas influencia o pai da tag <p>

	 

	Penso que estou certo!

>

Em 22/08/2017 at 12:18, Pita disse:

Assim não funciona?

<style>
/Sem colocar estilo para a imagem/
p {

 border: red;
 background-color: red;
 display: block;
 text-align: center;
}
</style>

<h1>

</h1>

<p>
 <img src='http://lorempixel.com/400/200/' alt='photo_bestQuality' />
</p>

  

	 

	 

	 

	[https://www.w3schools.com/tags/tag_center.asp](https://www.w3schools.com/tags/tag_center.asp)

	 

<p>
 <center>
 <img src='http://lorempixel.com/400/200/' alt='photo_bestQuality' />
 </center>
</p>

	 

	[https://www.w3schools.com/tags/att_div_align.asp](https://www.w3schools.com/tags/att_div_align.asp)

	 

<div align="center">
<p>
 <img src='http://lorempixel.com/400/200/' alt='photo_bestQuality' align="center" />
</p>
</div>