我正在处理以 CSS 为中心的书籍图片，我需要在书籍的两个相对“页面”上将两个文本区域显示为列。
我还想用 JavaScript 添加这些文本区域，以便可以通过页面底部的“下一步”和“后退”按钮更改它们。
我有一个 example page你可以看看。
这是该页面的 HTML:
<html>
<head>
<title>BookPopUp</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
<link rel="stylesheet" type="text/css" href="css/popup.css" />
</head>
<body background="images/bg.jpg">
<div id="bookpop">
<span></span>
</div>
</body>
</html>
这是页面的 CSS:
/*website BookPopUp Image Center*/
#bookpop {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
width: 1024px; /* same as the image width */
}
#bookpop span {
display: block;
width: 1024px;
height: 737px;
margin: 0 auto;
position: relative;
background: transparent url(../images/bookpopup.png) 0 0 no-repeat;
text-indent: -5000em;
outline: 0;
}
我还想在图片附近或上方放置两个按钮。他们会说 Next 和 Back，并链接到本书的下一页和上一页。
如果有更简单的方法，请告诉我。
无论如何，先谢谢了。
最佳答案
在图像上放置一个 div，其比例和位置与图像相同(覆盖图像)，并将文本居中放置在该 div 中。你需要有这样的布局:
<div class='container'>
<div class='text'>I am the text</div>
<img src='myimg.png'>
</div>
和CSS:
.container { position: relative; }
.container .text {position:absolute;top:0px;left:0px;
margin:0px;padding:0px;text-align:center;}
.container img {margin:0px;padding:0px;}
加载时的 javascript 将调整“.text”div 的大小以匹配同级图像的宽度和高度。
您需要使用分配给图像的加载方法来获取加载时的实际尺寸。您可以在此处搜索“图像加载事件”来查找示例。
关于javascript - 图片上的文字和 CSS 始终居中图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10734191/