Html 在图像中间保持iFrAME_Html_Css_Iframe

Html 在图像中间保持iFrAME

html css iframe

Html 在图像中间保持iFrAME,html,css,iframe,Html,Css,Iframe,因此，我有一个web应用程序，我希望用户能够像在android/iphone上一样查看它。我已经看了一些解决方案，它们都至少有一个问题。所以我的工作是在WebApp上加载一个iFrAME的中间，它在一个iPhone的图像中间。丑陋，但对于我想要的，它是完美的，除了iFrAME在屏幕周围移动取决于屏幕大小，所以不总是坐在帧的中间。我到目前为止所取得的成就 <html> <head> <meta name="keyword" content="key wo

因此，我有一个web应用程序，我希望用户能够像在android/iphone上一样查看它。我已经看了一些解决方案，它们都至少有一个问题。所以我的工作是在WebApp上加载一个iFrAME的中间，它在一个iPhone的图像中间。丑陋，但对于我想要的，它是完美的，除了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>


#容器{
位置：绝对位置；
排名前10%；
左：45%；
宽度：367px；
高度：717px；
利润上限：-50px；
左边距：-75px；
}
#浏览者{
位置：绝对位置；
最高：23%；
左：46%；
利润上限：-49px；
左边距：-64px；
边界：无；
溢出：隐藏；
}
您的浏览器不支持iFrame

每次在图像中间获得IFRAME-SMAK的任何完整的证明方法？

在此处查看当前结果

为什么不在三个

div

s上将手机图像分成三段？将上段作为背景图像应用于第一个div，将中间段应用于第二个div，将底部应用于第三个div。为所有三个div指定相等的宽度，为每个div应用一个高度以匹配其相应的图像段，并将每个div的

边距设置为0px auto
。最后，应用display:block到iframe，并将其绝对放置在第二个（中间）div内。最后，将所有三个div包装在一个大跳水中，高度与所有三个div的组合高度匹配。然后，把这个div定位在页面的中间，绝对地定位它，给它<代码>顶部：50%；边缘顶部：-[高度的一半]px；左：50%；左边距：-[宽度的一半]px
并将主体
元素设置为最小宽度
和最小高度
大于或等于大分区的宽度和高度。
表格中的表格具有100%的高度和宽度。也许中心的细胞是对的？是的，丑陋。