Bagaimana untuk Memusatkan Iframe Secara Mendatar dalam HTML dan CSS?

Linda Hamilton
Lepaskan: 2024-10-28 15:55:02
asal
224 orang telah melayarinya

How to Center an Iframe Horizontally in HTML and CSS?

Memusatkan Iframe Secara Mendatar

Pertimbangkan HTML dan CSS berikut:

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

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

Matlamatnya adalah untuk memusatkan iframe secara mendatar seperti div.

Walau bagaimanapun, iframe kekal dijajar kiri. Ini kerana iframes secara lalai adalah elemen sebaris. Elemen sebaris tidak menghormati margin: 0 auto; secara mendatar.

Untuk memusatkan iframe, anda perlu menjadikannya sebagai elemen blok. Ini boleh dilakukan dengan menambah paparan: blok; kepada CSS iframe:

iframe {
    display: block;
    border-style:none;
}
Salin selepas log masuk

Dengan tambahan ini, iframe akan menjadi elemen blok dan akan bertindak balas kepada margin: 0 auto;. Ini akan memusatkannya secara mendatar seperti div.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Iframe Secara Mendatar dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!