图片上方的文字和CSS始终以图片为中心

Question

I am working with a book image that is centered with CSS, and I need to have two text areas displayed as columns on the two facing "pages" of the book. 我正在使用以CSS为中心的书籍图像，并且需要在书籍的两个相对的“页面”上以列的形式显示两个文本区域。

I would also like to have these text areas added with JavaScript so they can be changed by Next and Back buttons at the bottom of the page. 我还希望在这些文本区域中添加JavaScript，以便可以通过页面底部的“下一步”和“后退”按钮进行更改。

I have an example page that you can look at. 我有一个示例页面，您可以查看。

Here is the HTML for the 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>

Here is the CSS for the page: 这是页面的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;
}

I would also like to put two buttons either near to or on top of the picture. 我还想在图片附近或上方放置两个按钮。 They would say Next and Back and link to next and previous pages of the book. 他们会说“下一个”和“上一个”，并链接到该书的下一页和上一页。

If there is an easier way to do this let me know. 如果有更简便的方法，请告诉我。

Anyway thanks in advance. 无论如何，谢谢。

Answer 1

put a div over the image with proportions and location are equal to the image (covering the image) and center the text inside that div. 在图像上放置一个div，其比例和位置与图像相等（覆盖图像），并将文本居中于该div中。 you need to have a layout like this: 您需要具有以下布局：

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

and the CSS: 和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;}

and the javascript on load will resize the ".text" div to match the width and height of the sibling image. 并且加载的javascript会调整“ .text” div的大小以匹配兄弟图像的宽度和高度。

You need to use a load method assigned to the image to get the real dimensions on load. 您需要使用分配给图像的加载方法来获取加载时的实际尺寸。 you can find samples by searching "image load event" here. 您可以在此处搜索“图像加载事件”来找到样本。

Answer 2

Why don't you create 2 spans? 为什么不创建两个跨度？

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

for the css 对于CSS

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

In case you want something more custom for each page just use the classes added to them. 如果您想为每个页面提供更多自定义内容，请使用添加到它们中的类。 I hope this will help you. 我希望这能帮到您。

Answer 3

Just so everyone knows I took both of your ideas (tpaksu | Axente Paul) and added them to my own version. 所有人都知道我接受了您的两个想法（tpaksu | Axente Paul），并将它们添加到我自己的版本中。 Here is the code so that others can see exactly how it is done. 这是代码，以便其他人可以确切看到它是如何完成的。

HTML below... 下面的HTML ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META NAME="ROBOTS" CONTENT="NONE">
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <title>BookPopUp</title>
  </head>
  <body background="images/bg.jpg">
    <div id="bookpop">
      <div>
        <span class="leftpagetext">Hello this is a text to see exactly where all of this is going to go!</span>
        <span class="rightpagetext">Trying to see where this goes as well! Hello this is a text to see exactly where all of this is going to go!</span>
        <img src='images/bookpopup.png'>
      </div>
    </div>
  </body>
</html>

And the CSS Below... 还有下面的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 */
}
/* Span container class for text Left Side */
.leftpagetext {
    float: left;
    position: absolute;
    top: 120px;
    left: 100px;
    text-align: justify;
    width: 35%;
}
/* Span container class for text Right Side */
.rightpagetext {
    float: right;
    position: absolute;
    top: 120px;
    right: 100px;
    text-align: justify;
    width: 35%;
}

So again thanks a lot to both of you. 再次非常感谢你们俩。 Now I know and everyone else who see's this knows. 现在我知道了，其他所有人都知道。 I am going to be doing another book like this but in a scroll form for my wife's poems. 我将要写另一本书，但以卷轴的形式写给我妻子的诗。 Thanks a lot guys! 非常感谢你们！

PS The problem was i wasn't using div's inside of the div's lmao. PS问题是我没有在div的lmao中使用div的内部。 It had just slipped my mind and also calling the image inside of a css span call wasn't a good idea. 它只是让我无所适从，而且在css span调用内调用图像不是一个好主意。

图片上方的文字和CSS始终以图片为中心

问题描述

3 个解决方案

解决方案1
0 2012-05-24 09:04:16

解决方案2
0 2012-05-24 09:08:54

解决方案3
0 已采纳 2012-05-24 23:03:31

图片上方的文字和CSS始终以图片为中心

问题描述

3 个解决方案

解决方案1 0 2012-05-24 09:04:16

解决方案2 0 2012-05-24 09:08:54

解决方案3 0 已采纳 2012-05-24 23:03:31

解决方案1
0 2012-05-24 09:04:16

解决方案2
0 2012-05-24 09:08:54

解决方案3
0 已采纳 2012-05-24 23:03:31