如何居中iframe？

2016-07-20 77 views 4 likes

我一直在試圖集中在這個頁面上的幾個iframe link。然而，我見過的每個例子都嘗試過了，並且不起作用。您可以清楚地看到不居中的視差浮動div，並且在底部，html頁面的iframe向右浮動並且不居中。如何居中iframe？

任何幫助將不勝感激。

來源

2016-07-20 Calle

顯示：塊+保證金：汽車; .....你有沒有搜索一下？ :) –

我搜索了大約2個小時，所以是的:)我曾嘗試過。它無論如何都不起作用。 – Calle

再次，Oriol，我已經試過了。這顯然是我會嘗試的第一件事。我不會問這是否有效。 – Calle

回答

http://codepen.io/mlegg10/pen/zqLdJy 更改CSS填充，頂部和底部，以滿足您的需求

/* 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>

來源

2016-07-20 18:38:47 mlegg

謝謝！這工作。 – Calle

display:block + margin:auto;

iframe { 
 
    display:block; 
 
    margin:auto; 
 
}

<iframe></iframe>

來源

2016-07-20 18:08:04

相關問題

11. iframe的高度和寬度居中
12. 如何居中div？
13. 如何居中div
14. 如何居中DataGridTemplateColumn.HeaderTemplate
15. 如何居中div？
16. 如何居中TextView？
17. 如何居中div
18. 如何居中gridster.js？
19. 如何居中NSSegmentedControl
20. 如何居中div
21. 如何居中Photoslideshow
22. 如何在iframe中
23. 如何在iframe中
24. HTML CSS：如何水平居中瀏覽器模式窗口包含iframe？
25. 如何水平居中iframe（Google Map）的內容？通常的方法不工作
26. 如何居中我的JFrame？
27. 如何居中導航欄？
28. 如何將腳本居中？
29. 如何居中分頁？
30. 如何居中ul菜單？