web-dev-qa-db-ja.com

iframeを水平方向の中央に配置する方法

次の例を考えてください。（ ライブデモ ）

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のように中央揃えになっていないのですか？どのようにしてそれを集中的に調整できますか？

htmlcssiframealignmentcenter-align
210
Misha Moroshko

Iframe cssにdisplay:block;を追加してください。

346
Alohci

ウェブページのiframeを中央に配置する最も簡単な方法は、次のとおりです。

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

幅と高さは、HTMLページのiframeのサイズになります。

31
pedro

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;

}
19
mgraph

Iframeにビデオを入れていて、レイアウトを滑らかにしたい場合は、このWebページを参照してください。 液体幅ビデオ

ビデオソースによっては、古いビデオをレスポンシブにしたい場合は、戦術を変更する必要があります。

これがあなたの最初のビデオであるならば、これは簡単な解決策です：

<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%;
}

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

10
Nohl

Iframe要素を整列させる最も簡単なコード：

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

<div>の中にiframeを入れることができます

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

ブロック要素の中に入っているのでうまくいきます。

6
Sonal Khunt

http://www.w3schools.com/css/css_align.asp によると、左右の余白をautoに設定すると、左右の余白を同様に利用可能なマージン。結果は中央揃えの要素です。

margin-left: auto;margin-right: auto;
3
boussac

あなたが試すことができます

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

私はあなたのためにそれが役に立つことを願っています

リンク

3
Kael