0

O site tem uma imagem de centro e um pequeno texto. Quando eu redimensiono a página, ela se vai se ajustando (responsividade). Quando chega em determinado ponto 350-400px aproximadamente, a div com a imagem e o texto desce para o fundo da página, como resolver isso?

body, html {
  height:100%;
  padding:0;
  margin:0;

}
.block {
  height: 100%;
  width: 100%;
  text-align: center;
  background: black;

}


.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  
}

.centered {
  display: inline-block;
  vertical-align: middle;
  max-width: 500px; 
  background: white;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
<div class="block">
     
    <div class="centered">
    
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="img-responsive" id="img_logo">
 <p style="color: black"> <a style="font-size:35px;"> xxxxxx</a> <br><br>text text <br> address <br>  </p>      
   </div>
  </div> 

1 Resposta 1

1

Remova o inline-block da classe

.block:before

Ele que está criando um espaço de 100% antes da classe .block e empurrando a div para baixo quando a página é redimensionada.

1
  • Acabei de descobrir isso agora mesmo rsrs. Este trecho é o que centraliza todo o conteúdo na tela. Removi o .block:before, modifiquei algumas coisas e funcionou. Obrigado!
    – Zkk
    8/01/2016 às 15:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .