Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I center an iframe? [duplicate]

I've been trying to center a couple of iframes on this page link. However, every example I have seen I've tried and doesn't work. You can clearly see the parallax floating div that isn't centered and at the bottom the iframe for an html page is floating to the right and not centering as well.

Any help would be much appreciated.

like image 895
Calle Avatar asked Jul 20 '16 18:07

Calle


1 Answers

http://codepen.io/mlegg10/pen/zqLdJy change the css padding-top and bottom to suit your needs

/* 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>
like image 198
mlegg Avatar answered Oct 19 '22 07:10

mlegg