Question

该网站的图像位于屏幕中央。当我调整视口大小时，图像将被调整（响应），但当它在某个点（350-400px左右）到达时，它会下降到底部。怎么解决？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

添加样式可能会对您有所帮助

.block
{  
    position:relative;
     width:100%;
    height:100%;
 }
 .centered
 {
    position: absolute;
   top: 50%;
   left: 50%; 
   text-align:center;   
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%); 
   -ms-transform: translate(-50%, -50%); 
   -o-transform: translate(-50%, -50%); 
   transform: translate(-50%, -50%); 
 }

.img-responsive {
  display: block;
  max-width: 100%;
  height:auto;
  width:100%;
}

Answer 2

您需要更改两件事。

首先 - CSS的这一部分导致您的图像“下拉”，因为它在“之前”添加了一个空内容，但其高度为其父div的100％。你需要删除它。

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

}

第二 - 为了使图像真正具有响应性，除了最大宽度之外，还需要添加其实际宽度。

.img-responsive {
  display: block;
  max-width: 100%;
  width: 100%;  /* Add this */
  height: auto;
}

Working Demo Here

或运行下面的代码片段

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%;
  width: 100%; /* Add this */
  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>

Answer 3

在下面的部分中查看您的代码：

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

您为该块的高度设置了100％。将其更改为自动，如下所示：

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

vertical-align不会更改您可以删除它的任何内容。

当我将视口大小调整到底部时

3 个答案: