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 Readme上查看问题的说明，但请预览代码，然后使用小蓝色按钮将预览弹出到全屏模式。然后将显而易见，居中不起作用。

我已经尝试了有关此链接的建议，但没有成功。

Answer 1

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

也许添加

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

会解决问题。那里有一些动态创建的类，因此您可能需要添加!important，因此不会覆盖。

问题是，在大屏幕上，iFrame容器的宽度为100％。因此，如果您在1400px屏幕上查看它，则iFrame容器元素的宽度为1400px。

iframe也设置为100％宽度，因此它的宽度也为1400px。

但是，iFrame的内容具有1000px的max-width，并且左对齐。因此，它似乎在左边。

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

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

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