html - 在 div 内的 iframe 中水平居中图像

Question

我已经遍历并尝试了各种不同的编码来定义宽度和显示； block ，似乎没有任何效果。

我正在尝试将放置在位于 div 中的此 iframe 中的任何图像居中。到目前为止，我所尝试的一切都使图像保持在左侧对齐。这是代码。希望有人能提供帮助。

#apDiv2 {
    position:absolute;
    width:1020px;
    height:490px;
    z-index:2;
    left: 0;
    top: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    clip: rect(auto,auto,auto,auto);
}

#bottomframe {
    height:490px;
    width:1020px;
    border:none;
    scrolling:no;
    display: block;
    margin: 0 auto;
    border: 0;
}

HTML代码如下:

<div id="apDiv2">
    <iframe id="bottomframe" name="bottomframe" src="fliers/image1blurthumb.png">
    </iframe>
</div>

Answer 1

你不能这样做。因为它是一个 iframe，所以它有一个单独的文档上下文和样式。您必须使用 javascript 将 CSS 注入(inject)到 iframe 中，但由于您是直接在框架中打开图像，因此您没有 HTML 文档可以在其中附加样式。

但我不得不问，你们究竟为什么要使用 iframe 来显示图像？为什么不只是一个常规的 IMG 标签？