HTML センター iFrame

この投稿では、HTML ドキュメントで iFrame を中央に配置するためのさまざまな方法について説明します。 iframe 要素はインライン フレームを定義します。

インライン フレームを使用して、別のドキュメントを現在の HTML ドキュメントに埋め込みます。

HTML で iFrame を中央に配置

1. display : block - 要素のレンダリング ボックスのタイプ (表示動作) は、display 属性によって指定されます。 display: block は、要素に対して段落要素のような block 要素を表示します。 幅全体を埋め、新しい行から始まります。
2. text-align : center - block 要素の内部コンテンツは text-align CSS 属性を使用して配置されます。 これらは、デフォルト値である text-align: left の従来の値です。 コンテンツの左側が揃えられます。

前の概念をさらに理解するために、次の例を検討してください。

<div>div</div>
<iframe class="iFrame" src="data:,iframe"></iframe>

<hr>

<div id="all">
    <div>div</div>
    <iframe src="data:,iframe"></iframe>
</div>

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

.iFrame {
    display: block;
    border-style: none;
}

#all{
    width: 150px;
    text-align: center;
}

前の例では、iframe で 2つの div を定義しました。 display: block; で iframe を定義しました。 最初の div の属性、次に text-align: center; を適用 親divで囲んだ後、2番目のiframeに。