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 HTML

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

我尝试this link的建议已经没有成功。

Answer 1

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

可能会添加

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

会做到这一点。有些类是在那里动态创建的，因此您可能需要添加!important，以便不会覆盖它。

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

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

但iframe的内容的max-width为1000px，并且是左对齐的。所以它似乎偏向左边。

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

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

index.html中的

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