html - 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

display:block;iframe cssに追加します。

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

iframe {
    display: block;
    border-style:none;
}

<div>div</div>
<iframe src="data:,iframe"></iframe>

Answer 2

Webページのiframeを中央に配置するための最良の方法とより簡単な方法は次のとおりです。

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

幅と高さは、html ページの 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

ビデオを 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 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

免責事項: これは私のコードではありませんが、テストした結果には満足しています。

Answer 5

これに対する私の最も簡単な解決策。

iframe {
    margin:auto;
    display:block;
}

Answer 6

iframe を<div>

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

ブロック要素内にあるため、機能します。

Answer 7

http://www.w3schools.com/css/css_align.aspによると、左右の余白を auto に設定すると、利用可能な余白を均等に分割するように指定されます。結果は中央揃えの要素です:

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