1. ホーム
  2. html

[解決済み】iframeを水平方向にセンタリングする方法は?

2022-01-30 20:18:37

質問

次のような例を考えてみましょう: ( ライブデモ )

HTMLです。

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

CSSです。

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

結果

なぜ iframe のように中央揃えではありません。 div ? どうすれば中央揃えになりますか?

解決方法は?

追加 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>