在div内的iframe中水平居中显示图像

Question

我已经看遍了所有的代码，并尝试了各种不同的代码来定义宽度和显示；块似乎什么都不起作用。

我正在尝试将我放在这个iframe中的任何图像居中，它位于一个div中。到目前为止，我尝试的所有方法都使图像保持左对齐。下面是代码。希望有人能帮上忙。

#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注入到iframe中，但是因为您是直接在框架中打开图像，所以没有HTML文档可以向其中附加样式。

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

Answer 2

尝试将text-align:center添加到#bottomFrame样式。这将使图像在iframe中居中。您可能还需要提供iframe位置。

但是，图像的宽度必须小于1020px，才能居中。