When I resize the viewport, the image descends to the bottom of the page

Navigation
0

The site has a center image and a small text. When I resize the page, it will adjust itself (responsiveness). When it arrives at a certain point 350-400px approximately, the div with the image and text descends to the bottom of the page, how to solve this? 

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>
    
asked by anonymous 08.01.2016 / 16:25

1 answer

1

Remove the inline-block of the class

.block: before

It is creating a space of 100% before the class .block and pushing the div down when the page is resized.

    
08.01.2016 / 16:40
Problem in View (details) Doubt about development environment LAMP with Vagrant and provision with Puppet