iframeを水平方向に中央揃えする方法は？

234

次の例を検討してください：（ライブデモ）

HTML：

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

CSS：

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

結果：

ここに画像の説明を入力してください

なぜがのiframeように中央揃えにならないのdivですか？どうすれば中央に配置できますか？

— ミシャモロシコ
ソース

6

このiframeのdivをラップしないのはなぜですか？

— Giberno 2011

384

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

— アロッチ
ソース

28

ありがとう！inline frameはインライン要素であると推測していたはずです:)

— Misha Moroshko

34

これが「i」の意味です。

— Aayush 2013年

11

それで、代わりに、コンテナにtext-align: centerルールを与えることもできますよね？

— KOVIKO 2014

1

はい、text-alignを追加します：コンテナーの中央も機能します

— chrisweb

9

追加する必要があることもわかりましたmargin: auto;

— MarkyDD 2017年

45

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

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

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

— ペドロ
ソース

1

align属性が廃止されたと思いましたか？OPがCSSの代わりにこのアプローチを使用する必要があるのはなぜですか？利点は何ですか？

— andrewsi 2015年

4

style="text-align:center"は非推奨ではなく、同じ仕事をします

— Anthony

減価償却されていても、これは機能しますが、他のすべては機能しません。

— user819490

これはHTMLファイルで機能するため、私のような初心者にとっては簡単に実装できます。私は2017年にそれをやったばかりなので、減価償却してはいけません。先端をありがとう！

— Renel Chesak 2017

20

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;

}

— mgraph
ソース

11

ビデオを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%;
}

スニペットを展開

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

— ノール
ソース

これは、iframe内のビデオをレスポンシブにして正常に機能させるためです。ありがとうございます！

— Ricardo

11

iframe要素を配置する最も簡単なコード：

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

— タッシャーソニ
ソース

この最初の回答方法をご覧ください。この質問は以前に回答されています。明らかに、ここに回答を追加できます。しかし、答える前にいくつかのポイントを理解する必要があります。まず、以前に同じコードまたは提案で追加された回答を追加しないでください。第二に、ユーザーが問題について非常に具体的に尋ねた場合や、これを解決するために何が必要かについて、過度に複雑な回答を追加しないでください。3番目に、回答または質問に関して何か提案したい場合は、コメントを追加できます。

— ankit suthar 2017

6

あなたは中にiframeを置くことができます <div>

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

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

— ソナル・クント
ソース

3

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

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

— Boussac
ソース

1

親要素のスタイルtext-alignが中央に設定されている場合のみ。

— parvus

3

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

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

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

リンク

— ケール
ソース

1

私の場合、解決策はiframeクラスを追加することでした：

    display: block;
    margin-right: auto;
    margin-left: auto;

— ネジル
ソース

0

ここでは、画面の中央に水平方向にiframeまたは画像を作成するのに苦労しているすべての人のためにスニペットを配置しました。よろしければ、THUMBS UP VOTEをお願いします。

style> img＆iframe>これはタグ名ですので、他のタグを中央に配置したい場合は変更してください

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

スニペットを展開

— マンタン・パテル
ソース