如何使iframe在主窗口水平滚动时更改其位置

Question

我的UI中的iframe元素有问题。当我调整屏幕大小（使其变小）并开始水平滚动时，它不会滚动到iframe，但iframe保持在同一固定位置，不可能看到它。

示例

和HTML:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

Answer 1

您必须通过添加left：50%和margin left iframes宽度的一半来居中，例如：

div#iframe-wrapper {
    position: fixed;
    left: 50%;
    margin-left:-150px; /* this must be the half of the iframe's width */
 }

通过添加top:50%和margin-top:（减去iframes高度的一半），可以对垂直居中执行同样的操作。关于的定位，您不需要bottom或"div#iframe-wrapper iframe"