保持IFRAME在圖像

所以我有一個web應用程序，我想用戶查看，如果它是在Android/iPhone的中間。我已經看了幾個解決方案，其中至少有一個錯誤的解決方案。所以我的工作就是說web應用程序加載在一個iframe的中間，該iframe位於構成它的iphone的圖像中間。醜陋但我想它是什麼，除了取決於屏幕尺寸所以並不總是在框架中間坐在屏幕周圍的iframe中移動完善。保持IFRAME在圖像

到目前爲止，我所取得的成就。

<html> 
    <head> 
    <meta name="keyword" content="key words, keywords" /> 
    <meta name="description" content="brief and to the point description of the web page." /> 
    <meta name="robots" content="all" /> 

    <style> 
    #container { 
position: absolute; 
    top: 10%; 
    left: 45%; 
    width: 367px; 
    height: 717px; 
    margin-top: -50px; 
    margin-left: -75px; 
    } 
    #browser { 
    position: absolute; 
    top: 23%; 
    left: 46%; 
    margin-top: -49px; 
    margin-left: -64px; 
    border: none; 
    overflow: hidden; 
    } 
    </style> 

    </head> 
    <body style ="background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C7000D),  to(#2E0002))"; > 
    <div id="container"><img src="images/ip4.png" style=""></div> 

    <iframe id="browser" src="http://server.com/index.php?id=5" width="320px"  height="482px" scrolling="no"> 
    <p>Your browser does not support iframes.</p> 
    </iframe> 
    </body> 
    </html>

任何全面的證明方法，每次都在圖像中間獲取iframe？

查看當前結果這裏images of results

來源

2011-12-08 user1086912

用100％的高度和寬度的表內的表。也許中心內的細胞對齊？是的，醜陋。 – Dave

爲什麼不超過三個div在打電話圖像分解成三段？將頂部分段作爲背景圖片應用於第一個div，將中間分段應用於第二個div，將底部應用於第三個div。給所有三個div的寬度相同，高度適用於每一個div來匹配其相應的圖像段，並設置每個div的margin到0px auto。最後，將display: block;應用於iframe，並將其置於第二個（中間）div內。最後，將所有三個div都包含在一個大型潛水中，其高度與所有三個div的高度相匹配。然後，在頁面的中間位置這個div，它絕對定位，給它top: 50%; margin-top: -[one-half of height]px; left: 50%; margin-left: -[one-half of width]px;和設置您的body元素有一個min-width和大格的寬度和高度min-height大於或等於。

來源

2011-12-08 03:40:18 Aaron

保持IFRAME在圖像

回答

相關問題