Ir para conteúdo
codercss

Centrar imagem no inteiror da tag <p>

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por BryanSamuel
      Quando eu puxo a imagem ela vem deitada, uma imagem tirada em um Smartphone por exemplo, esse problema não acontece com todas as imagens, mas com as tiradas no meu celular por exemplo são todas. eu puxo somente o link da imagem do banco de dados mysql , a imagem fica salva em uma pasta separada, quando eu abro a imagem na pasta ela está na orientação normal, "em pé".
      Agradeço muito se alguém puder me ajudar.
    • Por Evair Peterson
      Boa noite.

      Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.

      Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
      Seguem os códigos HTML e CSS:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html lang="pt-br"> <head>     <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head>   <body>     <div id="main">         <div id="viewport_left" class="viewports">         </div>         <div id="viewport_center" class="viewports">             <img id="imagem_teste" src="imagem_teste_01.jpg">         </div>         <div id="viewport_right">         </div>     </div>     <div id="footer">     </div> </body> </html>  
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 * {     margin: 0;     padding: 0;     text-align: center;     overflow: hidden; } #main {     width: 100%;     margin: 0; } #viewport_left {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     left: 0;     top: 0; } #viewport_center {     min-height: calc(100vh - 25px);     width: calc(100vw - 650px);     margin-bottom: 25px;     border-left: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     background-color: red;     position: absolute;     left: 50%;     top: 50%;         margin-left: calc(((100vw - 648px) / 2)* -1);         margin-top: calc((100vh / 2)* -1);     display: table;     overflow: hidden; } #imagem_teste {     max-height: calc(100vh - 25px);     position: absolute;     width: auto;     height: auto; } #viewport_right {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     right: 0;     top: 0; } #footer {     position: fixed;     bottom: 0;     left: 0;     height: 24px;     width: 100%;     background-color: #333333;     border-top: 1px solid #FFFFFF;     text-align: center;     font-family: Verdana, Geneva, sans-serif;     font-size: 12px;     color: #FFFFFF; }
      Alguém sabe como posso corrigir este problema?
      Desde já agradeço a toda e qualquer ajuda e colaboração.

      Grato, Evair Peterson.
    • Por alecram28
      Preciso criar um album de fotos que ao clicar na imagem apareça uma descrição, e ao clicar novamente na imagem a descrição desapareça. 
      Consigo fazer aparecer o texto mas não consigo oculta-lo depois de clicar novamente.
      Outra duvida, coloquei a div texto mas a formatação css que coloco nao aparece.
       
      HTML:
        <body> <h1>ÁLBUM DE FOTOS</h1>   <div class="album"> <img src="foto1.jpg" onclick="mostrarTexto('Descriçao1!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto2.jpg" onclick="mostrarTexto('terbrbrb!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto3.jpg" onclick="mostrarTexto('aaaaaaa!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto4.jpg"onclick="mostrarTexto('bbbbbbbb')" max width="300" max height="300"> </div> <div class="album"> <img src="foto5.jpg" onclick="mostrarTexto('cccccccc')" max width="300" max height="300"> </div>   <div class="album"> <img src="foto6.jpg" onclick="mostrarTexto('dddddddd')" max width="300" max height="300"> </div> <div id= "texto"></div> <div class="album"> <img src="foto7.jpg" onclick="mostrarTexto('eeeeeee')" max width="300" max height="300"> </div> <div class="album"> <img src="foto8.jpg" onclick="mostrarTexto('fffffff')" max width="300" max height="300"> </div> <div class="album"> <img src="foto9.jpg" onclick="mostrarTexto('ggggggg')" max width="300" max height="300"> </div>     </body>  
      CSS:
      html { font-family: Arial, Helvetica, sans-serif   }   h1{ font-family: Arial, Helvetica, sans-serif; color: rgb(117, 170, 231); font-size:2rem; text-align: left; }   .album{ float: left; width: 500px; }   .texto{ font-family: Arial, Helvetica, sans-serif; font-size:2rem; color: rgb(92, 192, 92);   }  
      JS:
      function mostrarTexto(msg) { texto.innerHTML= msg;   }
    • Por brunocarvalho
      Boa tarde,
       
      estou com uma duvida. Tenho um form onde este faz upload de multiplas imagens ao mesmo tempo. até ai esta tudo bem e esta a funcionar bem. mas tenho a necessidade de baixar a qualidade de imagem para 50%. EX uma imagem que tenha 4Mb ficar bem mais leve.
       
      andei a pesquisar e encontrei este codigo só qu nao sei como devo aplicar: 
       
      // Skip the to parameter using NULL, then set the quality to 75% imagejpeg($im, NULL, 75); // Free up memory imagedestroy($im); Alguem me pode dar uma ajuda?
       
      Obrigado 
       
       
      protected function moveUpload($a, $fileName){ $nome =$this->changeName(); //$ext = pathinfo($fileName, PATHINFO_EXTENSION); //penso que deve ser aqui move_uploaded_file($this->files[$a]["tmp_name"],$this->output_dir.$nome.".".$this->file_extension($fileName)); if($this->fileCount==1 && $this->fileCount<>0){ //$this->return_file_name($nome); $this->file_name = $nome.".".$this->file_extension($fileName); return $nome; }else if($this->fileCount>1 && $this->fileCount<>0){ $this->return_files_array_names($nome.".".$this->file_extension($fileName)); //return $nome; } //return $nome; }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.