iframe要素を中央揃いにする方法を教えてください。

   <iframe width="700" height="400" src="https://www.youtube.com/embed/ZWA8raXevSc" frameborder="0" allowfullscreen></iframe>

上記コードをhtml内に埋め込むと、画面左端に位置されました。
クラスを追加して下記プロパティを設定しても動きませんでした。

① text-align: center;

② margin: 0 auto;

画面中央に配置する場合どのような方法があるか教えてください。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

divで囲んだ上で、text-align: center;をかけてあげると中央寄せになります。

HTML
1<div class="hoge">
2    <iframe>(略)</iframe>
3</div>

css
1.hoge { text-align: center; }

margin: auto;で中央寄せしたい場合はiframeにdisplay: block;をかけてあげれば良いです。

投稿2017/06/14 08:09

総合スコア353

2017/06/14 08:14 編集

T_saさん、早速の回答ありがとうございました。勉強になりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。