Question

我正在尝试找到有关div的解决方案。我希望文本位于背景图像的中间。在我的代码中，文本和背景故意只显示一个小屏幕。我尝试了text-align center和vertical-align：middle但是没有达到预期的结果。有人可能知道如何管理代码吗？

#yourimage {
  background-image: none;
}

#yourimage p{
  display:none;
}
    
@media (max-width: 500px) {
  #yourimage {
    background-image: url('http://placehold.it/350x150/f22/fff');
    background-size:cover;
    background-image: block;
  }
  
  #yourimage p{
  display:block;
  vertical-align: middle;
}
}

<DIV id="yourimage">
<p>
Resize your browser window to see the image
</p>
</div>

Answer 1

你需要给div一个固定的宽度＆amp;高度。本守则应该做到这一点。在中心对齐项目的一种好方法是使用CSS Flex。

此外，没有background-image: block; CSS属性。

#yourimage {
  display:none;
}
    
@media (min-width: 100px) {
  #yourimage {
      width:350px;
      height:150px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      background: url('http://placehold.it/350x150/f22/fff');
      background-size:cover;
  }
}

<div id="yourimage">
  <p>
    Resize your browser window to see the image
  </p>
</div>

Answer 2

您也必须使用webkit。用于浏览器兼容性请找到以下解决方案。

#yourimage {
  display:none;
}
    
@media (min-width: 100px) {
  #yourimage {
      width:350px;
      height:150px;
      display:flex;
	  display: -webkit-flex; /* Safari */
      align-items:center;
	  -webkit-align-items: center; /* Safari 7.0+ */
      justify-content:center;
	  -webkit-justify-content:center;
      background: url('http://placehold.it/350x150/f22/fff');
      background-size:cover;
  }
}

<div id="yourimage">
  <p>
    Resize your browser window to see the image
  </p>
</div>

希望这会有所帮助。

Answer 3

您可以这样做：

＆＃13;

* {box-sizing: border-box}
body {margin: 0}

#yourimage > p {
  display: none;
}
    
@media (max-width: 500px) {
  #yourimage {
    display: flex;
    justify-content: center; /* centers flex-items (children) horizontally */
    align-items: center; /* and vertically */
    background: url('http://placehold.it/350x150/f22/fff') no-repeat center center;
    background-size: cover;
    width: 350px;
    max-width: 100%; /* responsiveness */
    height: 150px;
    margin: 0 auto; /* horizontally centered on the page */
  }
  #yourimage > p {
    display: block;
  }
}

＆＃13;

<div id="yourimage">
  <p>Resize your browser window to see the image</p>
</div>

＆＃13;

仅在移动设备上加载背景图片

3 个答案: