Centrar imagem no inteiror da tag <p>

[codercss 14]

Olá a todos,

Tenho o seguinte código: https://jsfiddle.net/mbbjsg3q/

Sei que não é boa prática colocar img no interior da tag p, mas neste projecto tem que ser. A questão é como centro a imagem?

 

Obrigado

[Sergio S. F. Pereira 39]

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

 

p img {
    display: block;
    margin: 0 auto;
}

Veja o exemplo no codepen abaixo:

 

 

[codercss 14]

O parametro display: block é para que?

Obrigado

[Sergio S. F. Pereira 39]

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.

[codercss 14]

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

[Pita 53]

Assim não funciona?

<style>
/*Sem colocar estilo para a imagem*/  
p {
  border: red;
  background-color: red;
  display: block;
  text-align: center;
}
</style>

<h1>
Título
</h1>

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

 

[codercss 14]

É 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!

[Ana Gauna 45]

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>
Título
</h1>

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

 

 

 

 

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

 

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