iframe 不会居中

Question

我正在创建一个网页，该网页使用来自 python 库 Bokeh 的自动生成的 html 文件。我使用库导出 html 文件，然后使用 iframe 显示信息。

我想不出任何方法来使这个 iframe 的内容居中。

我尝试的 CSS 代码如下所示：

div.box {
    display: block;
    margin:auto;

    }

iframe.d {
      border: none;
      width: 100%;
      display:block;
    }

身体看起来像：

<div class = 'box'>
    <iframe class = 'd' src='graphs.html' id = 'beautifulgraphs' onload='autoResize("beautifulgraphs")'></iframe>
</div>

但我希望您可以查看下面的 plunker 以了解实际问题。

这是指向我的 HTML 的 plunker 链接：Plunker HTML

我在 plunker 自述文件中附上了如何查看问题的说明，但请预览代码，然后使用蓝色小按钮将预览弹出到全屏模式。然后很明显，居中不起作用。

我已经尝试了this link 上的建议，但没有成功。

Answer 1

您需要将 iframe 中的内容居中。为此，一种选择是将margin: 0 auto; 添加到.bk-root 类的第一个子元素中。

可能会添加

.bk-root > div {
  margin: 0 auto;
}

会成功的。那里有一些类是动态创建的，因此您可能需要添加一个 !important 以便它不会被覆盖。

问题是在大屏幕上 iframe 容器的宽度达到 100%。因此，如果您在 1400 像素的屏幕上查看它，则 iframe 容器元素的宽度为 1400 像素。

iframe 也设置为 100% 宽度，因此宽度也变为 1400px。

但是 iframe 的内容有一个 1000px 的max-width，并且是左对齐的。所以它似乎在左边。

解决此问题的另一个解决方案是在 iframe 容器上设置 max-width。这可以通过以下方式完成：

.box {
  max-width: 996px;
  margin:  0 auto;
}

在index.html。使用此方法，您无需在 iframe 中添加样式。