圖片和CSS文字始終居中圖片

我正在處理以CSS爲中心的書籍圖像，並且我需要在本書的兩個面向「頁面」上顯示兩列文本區域。圖片和CSS文字始終居中圖片

我還想讓這些文本區域添加JavaScript，以便它們可以通過頁面底部的Next和Back按鈕進行更改。

我有一個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 and Back並鏈接到本書的下一頁和上一頁。

如果有更簡單的方法可以讓我知道。

無論如何感謝提前。

來源

2012-05-24 Anthony

大家都知道我把你的兩個想法（tpaksu | Axente Paul）都加入了我自己的版本。這裏是代碼，以便其他人可以看到它是如何完成的。下面

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>

而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%; 
}

所以再次非常感謝你們兩位。現在我知道了，其他所有看到這個的人都知道。我將要做這樣的另一本書，但是以我妻子詩歌的卷軸形式出版。非常感謝你們！

P.S.問題是我沒有使用div的div內部的lmao。它剛剛下滑了我的想法，並且將這個圖像稱爲css span調用並不是一個好主意。

來源

2012-05-24 23:03:31 Anthony

在圖像上放置一個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來匹配同級圖像的寬度和高度。

您需要使用分配給圖像的加載方法來獲取加載時的實際尺寸。您可以在這裏通過搜索「圖像加載事件」來查找樣本。

來源

2012-05-24 09:04:16

K，它允許我在圖像上書寫文字，但是如何像在bookpop .css命令中一樣將它保持居中？ – Anthony

爲什麼不創建2個跨度？

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

爲CSS

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

如果你想要的東西，更多的自定義每個頁面只需要使用添加到它們的類。我希望這會幫助你。

來源

2012-05-24 09:08:54

它看起來如何，我想我沒有跟着。出於某種原因，上面的css命令不起作用，除非應用了，但問題是如果我將兩個添加到它，圖像翻倍。問題再次是，如果我刪除上述CSS爲中心的形象它現在不居中是我想要的。 – Anthony

圖片和CSS文字始終居中圖片

回答

相關問題