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

Question

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

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

① text-align: center;

② margin: 0 auto;

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

Answer 1

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

<div class="hoge">
    <iframe>(略)</iframe>
</div>

.hoge { text-align: center; }

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

Comments

[6111-debutant_.]

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