HTML と CSS で Iframe を水平方向に中央揃えにする方法は?

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

次の HTML と CSS について考えてみましょう。

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

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

目標は、iframe を div と同様に水平方向に中央揃えにすることです。

ただし、iframe は左揃えのままです。これは、iframe がデフォルトでインライン要素であるためです。インライン要素はマージンを考慮しません: 0 auto;

iframe を中央に配置するには、iframe をブロック要素にする必要があります。これは、display: block; を追加することで実行できます。 iframe の CSS:

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

これを追加すると、iframe はブロック要素になり、margin: 0 auto; に応答します。これにより、div のように水平方向に中央揃えになります。

以上がHTML と CSS で Iframe を水平方向に中央揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。