iframeを水平に中央に配置するにはどうすればよいですか？

Question

は、次の例を考えてみます（live demo）

HTML：

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

CSS：

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

結果：

なぜiframeはdivのように中央に配置されていませんか？どのように私はそれを集中的に整列させることができますか？

Answer 1

iframe CSSにdisplay:block;を追加してください。

Answer 2

あなたはそれがブロック要素の内側になりましたので、それが動作<div>

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

内のiframeを置くことができます。

Answer 3

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; 

} 

Answer 4

によると、autoに左右の余白を設定すると、彼らが平等に利用できるマージンを分割する必要があることを指定します。その結果、中心要素である：

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

Answer 5

あなたはiframe内にビデオを入れていると、あなたのレイアウトが流体になりたい場合は、このWebページをご覧ください：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%; 
 
}

は、免責事項：これは私のコードではありませんが、テストして結果に満足しています。あなたのウェブページ上のiframeを中央に

Answer 6

最良の方法や、よりシンプルです：幅と高さは、あなたのHTMLページにあなたのiframeのサイズになります

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

。

Answer 7

iframe要素整列する最も簡単なコード：このiframe対応のdiv要素をラップしていない理由を

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