javascript - iframe 不会居中

Question

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

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

我尝试的 CSS 代码看起来像这样:

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

    }

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

body 看起来像:

<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 的内容的 max-width 为 1000px，并且是左对齐的。所以它似乎偏向左侧。

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

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

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