Mengapa Iframe Saya Tidak Pusat Mendatar?

Cara Memusatkan Iframe Secara Mendatar

Soalan asal menyerlahkan senario di mana iframe tidak menjajarkan secara berpusat dalam div induknya. Punca isu ini dan penyelesaiannya digariskan di bawah.

Iframe Tidak Berpusat Dengan Betul

Dalam kod HTML dan CSS yang disediakan, iframe dipaparkan bersama div menggunakan sifat yang serupa untuk lebar, tinggi, jidar dan warna latar belakang. Walau bagaimanapun, iframe tidak menjajarkan secara berpusat seperti div. Ini kerana iframes adalah unsur sebaris secara semula jadi, bermakna ia menempati ruang hanya seluas kandungannya.

Penyelesaian: Tambahkan 'display:block;'

Untuk menjajarkan ke tengah iframe, adalah perlu untuk menukarnya daripada elemen sebaris kepada elemen blok. Ini boleh dilakukan dengan menambahkan sifat CSS berikut pada iframe:

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

Tweak Tambahan

Selain itu, untuk memastikan penjajaran yang betul dan menghalang sebarang sempadan daripada dipaparkan pada iframe, CSS berikut boleh digunakan:

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

CSS yang dikemas kini:

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

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

Dengan melaksanakan perubahan ini, iframe kini akan dipusatkan secara mendatar dalam div induknya.

Atas ialah kandungan terperinci Mengapa Iframe Saya Tidak Pusat Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!