使用自适应

Question

我花了很多时间在带有移动响应的图片上放置文字。实际上我正在构建一个HTML5 jQuery Mobile cordova移动应用程序。

这是较小设备中的示例屏幕。

这是大型设备中的示例屏幕。

我想将文本Some Text放在底部对齐中心的图像上，并具有响应性。

这是jQuery Mobile上生成图像和文本的代码。

<div class="ui-block-a">
  <div class="ui-bar" style="padding:5px">
    <img style="height: 100%;width:100%" src='img/book150.png'/>
     <p id="text">Some Text</p>
  </div>
</div>

尝试使用下面的CSS样式，但这仅在我将图像大小保持为一个大小时才有效。

#text {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

Answer 1

您需要为父母提供position:relative才能使其有效。

要将位于absolute的块元素水平居中，您需要应用此选项：

position:absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

来自MDN

  

相对定位的元素仍然被认为是在   文档中元素的正常流动。相反，一个元素   绝对定位的是从流程中取出并因此占用   放置其他元素时没有空间。绝对定位   元素相对于最近定位的祖先定位（非   静态的）。如果定位的祖先不存在，则为初始容器   使用。

段

.ui-block-a {
  position: relative;
  max-width:150px; /*you need to set a max-width/width */
}
.ui-bar {
  padding: 5px
}
#text {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
   /*demo*/
  bottom: 5px;
  background: red;
  max-width:100px;
  text-align:center

}
img {
  height: auto;
  max-width: 100%
}

<div class="ui-block-a">
  <div class="ui-bar">
    <img src='//lorempixel.com/150/150' />
    <p id="text">Some Text</p>
  </div>
</div>

Answer 2

尝试将#text替换为p。所以来自：

#text {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

要：

p {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}