iFrame が水平方向の中央に配置されないのはなぜですか?それを修正するにはどうすればよいですか?

iFrame を水平方向に中央揃えにする

クエリ:

以下のコード スニペットを考えてみましょう:

HTML:
<div>div</div>
<iframe></iframe>

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

周囲の div とは対照的に、iFrame 要素が中央に配置されないのはなぜですか?これはどのように修正できますか?

応答:

iFrame を水平方向に中央に配置するには、display: ブロックを適用します。プロパティを CSS に追加します。修正されたコードは次のとおりです。

HTML:
<div>div</div>
<iframe></iframe>

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

iframe {
    display: block;
    border-style:none;
}

表示: ブロック;プロパティは、iFrame がブロック レベルの要素として動作するように設定し、iFrame が独自の行を占有し、他のコンテンツと水平方向に整列するようにします。さらに、ボーダースタイル: なし。 iFrame のデフォルトの境界線を削除して、中央に配置されたボックスの外観を維持します。

以上がiFrame が水平方向の中央に配置されないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。