如何水平放置iframe中心？

175

HTML：

<div>div</div> 
<iframe></iframe>

CSS：

div, iframe { 
    width: 100px; 
    height: 50px; 
    margin: 0 auto; 
    background-color: #777; 
}

結果：

enter image description here

爲什麼iframe不是像div那樣居中對齊？我怎麼能集中對齊它？

來源

2011-12-03 Misha Moroshko

爲什麼不換一個div這個IFRAME？ – Giberno

297

將display:block;添加到您的iframe css中。

來源

2011-12-03 10:14:49 Alohci

+21

謝謝！我應該猜到，「內聯框架」是一個內聯元素:) –

+25

所以這就是「我」代表的。 – Aayush

所以，或者，你可以給容器一個'text-align：center'規則，對嗎？ – Koviko

你可以把iframe中一個<div>

<div> 
    <iframe></iframe> 
</div>

它的工作原理，因爲它現在是一個塊元素裏面。

來源

2011-12-03 10:18:17

測試 - 它不起作用 – user819490

HTML：

<div id="all"> 
    <div class="sub">div</div> 
    <iframe>ss</iframe> 
</div>

CSS：

#all{ 
    width:100%; 
    float:left; 
    text-align:center; 
} 
div.sub, iframe { 
    width: 100px; 
    height: 50px; 
    margin: 0 auto; 
    background-color: #777; 

}

來源

2011-12-03 10:20:13 mgraph

據，設置左，右頁邊距爲自動指定他們應該平分可用保證金。其結果是一個居中的元素：

margin-left: auto;margin-right: auto;

來源

2014-09-25 16:18:40 boussac

只有父元素的樣式text-align設置爲居中。 – parvus

如果你把一個視頻在iframe和你希望你的佈局是流體，你應該看看這個網頁：Fluid Width Video

根據不同的視頻信號源並如果你想讓舊視頻變得快速響應，你的戰術將需要改變。

如果這是你的第一個視頻，在這裏是一個簡單的解決辦法：

<div class="videoWrapper"> 
 
    <!-- Copy & Pasted from YouTube --> 
 
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> 
 
</div>

並添加此CSS：

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

免責聲明：這些都不是我的代碼，但我已經測試過，並對結果感到滿意。

來源

2014-10-13 18:38:23 Nohl

最佳途徑，更簡單地在您的網頁上居中iframe是：

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

其中寬度和高度將是你的iframe的HTML頁面中的大小。

來源

2015-11-15 14:18:56 pedro

我認爲'align'屬性已被棄用？爲什麼OP應該使用這種方法而不是使用CSS - 優點是什麼？ – andrewsi

'style =「text-align：center」'不被棄用，即使折舊，它也可以做同樣的工作 – Anthony

，但是一切都不行。 – user819490

對齊iframe元素的最簡單的代碼：

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

來源

2017-07-18 15:46:40

請首先看到如何回答這個問題之前已經回答，顯然，您可以在此添加答案。但是在回答之前你需要了解一些觀點。首先，不要添加之前添加了相同代碼或建議的答案。其次，如果用戶非常具體地詢問了問題以及他需要解決什麼問題，請不要添加過於複雜的答案。第三，如果您想就回答或問題提出任何建議，您可以添加評論。 –

如何水平放置iframe中心？

回答

相關問題