Javascript 图像上的文本和CSS始终以图像为中心

我正在使用一个以CSS为中心的图书图像，我需要在图书的两个面向“页面”上显示两个文本区域作为列

我还希望使用JavaScript添加这些文本区域，以便可以通过页面底部的“下一步”和“上一步”按钮更改它们

我有一本你可以看的书

以下是该页面的HTML：

书籍弹出窗口

以下是该页面的CSS：

/*网站BookPopUp图像中心*/
#书刊{
位置：绝对位置；
文本对齐：居中；
左：50%；
最高：50%；
边距：-368.5px自动0-512px；/*上边距值：图像高度除以2（即：240/2），左边距值：图像宽度除以2（即：260/2）*/；
宽度：1024px；/*与图像宽度相同*/
}
#书展{
显示：块；
宽度：1024px；
高度：737px；
保证金：0自动；
位置：相对位置；
背景：透明url（../images/bookpopup.png）0 0无重复；
文本缩进：-5000em；
大纲：0；
}

我还想把两个按钮放在图片的旁边或上面。他们会说“下一页”和“上一页”，并链接到这本书的下一页和前几页

如果有更简单的方法让我知道

---

无论如何，请提前感谢。

在图像上方放置一个div，其比例和位置与图像（覆盖图像）相同，并将文本置于该div内的中心。您需要这样的布局：

<div class='container'>
    <div class='text'>I am the text</div>
    <img src='myimg.png'>
</div>

加载的javascript将调整“.text”div的大小，以匹配同级图像的宽度和高度

---

您需要使用指定给图像的加载方法来获取加载时的真实尺寸。您可以在此处搜索“图像加载事件”来查找示例。

为什么不创建两个跨度

<span class="left-page-text"></span>
<span class="right-page-text"></span>

如果您想为每个页面定制更多内容，只需使用添加到其中的类即可。

---

我希望这会对你有所帮助。

让大家都知道我采纳了你的两个想法（tpaksu | Axente Paul），并将它们添加到我自己的版本中。下面是代码，以便其他人可以看到它是如何完成的

下面是HTML

书籍弹出窗口
您好，这是一个文本，以查看所有这一切将要去哪里！
试着看看这是怎么回事！您好，这是一个文本，以查看所有这一切将要去哪里！

下面的CSS

/*网站BookPopUp图像中心*/
#书刊{
位置：绝对位置；
文本对齐：居中；
左：50%；
最高：50%；
边距：-368.5px自动0-512px；/*上边距值：图像高度除以2（即：240/2），左边距值：图像宽度除以2（即：260/2）*/；
宽度：1024px；/*与图像宽度相同*/
}
/*文本左侧的Span容器类*/
.leftpagetext{
浮动：左；
位置：绝对位置；
顶部：120px；
左：100px；
文本对齐：对齐；
宽度：35%；
}
/*文本右侧的Span容器类*/
.rightpagetext{
浮动：对；
位置：绝对位置；
顶部：120px；
右：100px；
文本对齐：对齐；
宽度：35%；
}

再次感谢你们两位。现在我知道了，其他看到的人都知道了。我打算再写一本像这样的书，不过是以卷轴的形式写我妻子的诗。谢谢大家

---

问题是我没有在部门的lmao内使用部门的。我刚刚忘记了，在css span调用中调用图像也不是一个好主意。

K，这允许我在图像上写入文本，但我如何像bookpop.css命令那样保持图像居中？它看起来如何，我想我没有遵循。出于某种原因，除非应用了一个，否则上面的css命令不起作用，但问题是如果我在其中添加两个，图像会加倍。问题再次是，如果我删除了上面的css以使图像居中，那么它现在没有居中。

<span class="left-page-text"></span>
<span class="right-page-text"></span>

span{
float: left;
width: 50%; }