Iframe が水平方向の中央に配置されないのはなぜですか?

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

元の質問では、iframe が親 div 内の中央に配置されていないシナリオを強調していました。この問題の原因と解決策の概要を以下に示します。

Iframe が適切に中央に配置されない

提供された HTML および CSS コードでは、iframe が div と一緒にレンダリングされます。幅、高さ、マージン、背景色に同様のプロパティを使用します。ただし、iframe は div のように中央に配置されません。これは、iframe が本質的にインライン要素であるためです。つまり、コンテンツと同じ幅のスペースしか占有しないからです。

解決策: 'display:block;' を追加します

中央揃えにするにはiframe の場合は、インライン要素からブロック要素に変換する必要があります。これを行うには、次の CSS プロパティを iframe に追加します:

<code class="css">display: block;</code>

追加の調整

さらに、適切な配置を確保し、境界線が表示されないようにします。 iframe に次の CSS を適用できます:

<code class="css">border-style: none;</code>

更新された CSS:

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>

これらの変更を実装することで、iframe は内部の水平方向の中央に配置されるようになります。その親 div.

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