css - 如何让iframe在主窗口水平滚动时改变位置

Question

我的 UI 中的 iframe 元素有问题。当我调整屏幕大小时(使其变小)并开始使用水平滚动条滚动时，它不会滚动到 iframe，但 iframe 保持在相同的固定位置并且无法看到它。

Example

和 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 iframe 宽度的一半使其居中，例如:

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

 }

您可以通过添加 top:50% 和 margin-top:(减去 iframe 高度的一半)来垂直居中。关于定位，您不需要底部或“div#iframe-wrapper iframe”