Jquery 将文本覆盖在具有响应性的图像上

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

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

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

我想将文本

一些文本
放置在图像的底部，并与中心对齐

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

尝试将
文本
替换为
p
。因此，来自：

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

致：

您需要为家长提供一个
位置：relative
，以使其正常工作

要将块元素水平居中放置在绝对位置，需要应用以下方法：

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


从

相对定位的图元仍被视为处于
文档中元素的正常流动。相反，元素
被绝对定位的物体被从流中取出，因此被移除
放置其他图元时，请不要占用空间。绝对定位
元素相对于最近定位的祖先（非
静态）。如果定位的祖先不存在，则初始容器
使用

一小条

.ui-block-a{
位置：相对位置；
最大宽度：150px；/*您需要设置最大宽度/宽度*/
}
.ui栏{
填充：5px
}
#正文{
z指数：1；
位置：绝对位置；
左：0；
右：0；
左边距：自动；
右边距：自动；
/*演示*/
底部：5px；
背景：红色；
最大宽度：100px；
文本对齐：居中
}
img{
高度：自动；
最大宽度：100%
}

一些文本
code？你试过自己做吗？如果是的话，你尝试了什么，结果如何？将你申请的css放入
ui-block-a
和
ui-bar
中，以了解问题这不会有任何作用。非常感谢。我了解
位置：relative
。有一种方法可以在图像的中心对齐，而不是硬编码
左：7%
。
p {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

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