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 的一个笨蛋 link：Plunker HTML

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

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

Answer 1

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

可能会添加

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

就可以了。那里有一些动态创建的 classes，因此您可能需要添加一个 !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 中添加样式。

Iframe will not center