Mengapa iFrame Saya Tidak Berpusat Secara Mendatar, dan Bagaimana Saya Boleh Membetulkannya?

Mendatar Memusatkan iFrame

Pertanyaan:

Pertimbangkan coretan kod di bawah:

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

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

Bertentangan dengan div sekeliling, mengapa elemen iFrame gagal dijajarkan secara berpusat? Bagaimanakah perkara ini boleh dibetulkan?

Respons:

Untuk memusatkan iFrame secara mendatar, gunakan paparan: blok; harta kepada CSSnya. Berikut ialah kod yang disemak:

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;
}

Paparan: blok; harta menetapkan iFrame untuk berkelakuan sebagai elemen peringkat blok, memastikan ia menduduki barisnya sendiri dan sejajar dengan kandungan lain secara mendatar. Selain itu, gaya sempadan: tiada; menghapuskan sempadan lalai iFrame untuk mengekalkan rupa kotak berpusat.

Atas ialah kandungan terperinci Mengapa iFrame Saya Tidak Berpusat Secara Mendatar, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!