Question

我有一个顶级导航器，以及加载内容的导航器下方的iframe。布局有点像

<body>
<div style="text-align:middle">
    <div id="nav"></div>
    <iframe></iframe>
</div>
</body>

导航器设置为固定宽度，以匹配iframe内容的宽度，而不是全屏宽度。这样导航器和iframe在两侧对齐。

但是当iframe的高度超出屏幕时，iframe的垂直滚动条会显示，iframe会稍微离开（不再是绝对的水平）位置）并且没有与顶部导航器对齐。

即使有垂直条，我怎样才能使iframe始终显示在中心？

我认为这应该是一个常见的问题，但在这里没有找到类似的问题......

编辑1：在这里附上一个完整的示例来说明这个问题。这里索引是主页面，iframe2.html是没有垂直条的框架，iframe.html是带条的框架。蓝色块（iframe）未与其他两个对齐：

的index.html：

 <html>
<head></head>
<style type="text/css">
iframe {
    width : 100%;
    padding : 0;
    margin: 0 auto;
    display : block;
}
</style>
<body>
    <div style="text-align:center;margin:0 auto;overflow:hidden">
    <div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
        <span>test</span>
    </div>
    <iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
    <iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
    </div>
</body>
</html>

iframe2.html

<html>
<head></head>
<body style="padding:0px;margin:0px;">
    <div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>

Iframe.html的

<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
    <div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>

结果：

Answer 1

您可以使用css

来居中iframe

iframe {
  margin: 0 auto;
  display: block;
}

请参阅示例：https://jsfiddle.net/bnby6umd/

Answer 2

在我的评论之后（因为这似乎可以帮助您进行编辑）：

即使不需要滚动条也可能始终强制滚动条，然后将导航栏对齐？ body { overflow-y: scroll; }

并且在你的回复中，我建议保持元素对齐的最简单方法是确保它们的宽度相同。由于您现在永久强制滚动条，也许最简单的方法是添加第一个元素的宽度，或从第二个元素的宽度中删除，以考虑滚动条的宽度。

虽然这将取决于浏览器，因为每个浏览器可能会使用稍微不同的宽度滚动条，按照this article，我建议将宽度改为17个像素，看看是否达到了你想要的效果。 / p>

<强>更新

道歉，我误解了你的意思。您遇到此问题的原因是因为您在 iframe 元素的样式与其正在显示的文档中的内容之间产生了混淆。

通过将'iframe.html'文件中的<div>设置为900px的宽度，您只需对正在显示的内容进行样式设置。 “外部”iframe元素的样式设置为100％宽度，因此将跨越窗口的整个宽度。因此，居中的内容将被水平滚动条偏移，使外观不对齐 - 但实际的iframe根本不会移动。

只能对齐两个元素的边缘，无论它们的位置如何，都要使它们具有相同的宽度（显然，边缘可能永远不会对齐）。要做到这一点，请将<iframe>设置为正确的宽度 - 然后对后面的内容所做的就是不重要。这样，将自动考虑滚动条的宽度，并相应地调整总宽度。

基本上，在iframe的样式中，将width: 100%;更改为width: 900px;。

这是Fiddle。

我试图创建一个图表来帮助解释：

在左侧，内容由滚动条偏移，而在右侧，元素的样式和居中，而不是内容，因此滚动条只是重叠内容。

您可能还想查看iframe的一些documentation和tutorials。

如果有垂直滚动条，如何水平居中iframe？

2 个答案: