如何将iframe居中?

时间:2016-07-20 18:05:07

标签: html css iframe centering

我一直试图在这个网页link上设置几个iframe。然而,我所看到的每一个例子我都尝试过并且不起作用。您可以清楚地看到没有居中的视差浮动div,而在底部,html页面的iframe向右浮动而不是居中。

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:5)

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



<iframe></iframe>
&#13;
$ sudo -E apt-get -yq --no-install-suggests --no-install-recommends --force-yes install g++-5 libncurses5-dev
Reading package lists...
Building dependency tree...
Reading state information...
E: Unable to locate package g++-5
E: Couldn't find any package by regex 'g++-5'
apt-get.diagnostics
apt-get install failed
&#13;
&#13;
&#13;

答案 1 :(得分:5)

http://codepen.io/mlegg10/pen/zqLdJy 更改css padding-top和bottom以满足您的需求

/* Flexible iFrame */

.Flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
  <object width="100%" data=""https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"&amp;toolbar=0&amp;navpanes=0" type="application/pdf">
      <embed width="100%" type="application/pdf" src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"?scrollbar=0&amp;toolbar=0&amp;navpanes=0">
    </object>
</div>