Bagaimana cara memusatkan iframe secara horizontal?

234

Pertimbangkan contoh berikut: ( demo langsung )

HTML:

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

CSS:

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

Hasil:

masukkan deskripsi gambar di sini

Mengapa iframetidak terpusat seperti itu div? Bagaimana saya bisa menyelaraskannya secara terpusat?

— Misha Moroshko
sumber

6

mengapa tidak membungkus div untuk iframe ini?

— Giberno

384

Tambahkan display:block;ke iframe css Anda.

— Alohci
sumber

28

Terima kasih! Saya seharusnya sudah menebak bahwa elemen inline frameadalah elemen inline :)

— Misha Moroshko

34

Jadi itulah yang dimaksud dengan "i".

— Aayush

11

Jadi, secara bergantian, Anda bisa memberi wadah text-align: centeraturan, benar?

— KOVIKO

1

ya menambahkan

— perataan

9

Saya menemukan saya juga harus menambahkanmargin: auto;

— MarkyDD

45

Cara terbaik dan lebih mudah untuk memusatkan iframe di halaman web Anda adalah:

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

di mana lebar dan tinggi akan menjadi ukuran iframe Anda di halaman html Anda.

— pedro
sumber

1

Saya pikir alignatributnya sudah usang? Mengapa OP harus menggunakan pendekatan ini daripada menggunakan CSS - apa keuntungannya?

— andrewsi

4

style="text-align:center"tidak ditinggalkan dan akan melakukan pekerjaan yang sama

— Anthony

meskipun didepresiasi, ini bekerja, sedangkan yang lainnya tidak.

— user819490

Ini berfungsi dalam file HTML dan karenanya lebih mudah bagi pemula seperti saya untuk memberi pujian. Saya baru saja melakukannya pada tahun 2017 sehingga tidak boleh disusutkan. Terima kasih atas tipnya!

— Renel Chesak

20

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

— mgraph
sumber

11

Jika Anda meletakkan video di iframe dan ingin tata letak Anda berubah-ubah, Anda harus melihat halaman web ini: Video Lebar Cairan

Bergantung pada sumber video dan jika Anda ingin video lama menjadi responsif, taktik Anda perlu diubah.

Jika ini adalah video pertama Anda, berikut adalah solusi sederhana:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Luaskan cuplikan

Dan tambahkan css ini:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Luaskan cuplikan

Penafian: semua ini bukan kode saya, tapi saya sudah mengujinya dan senang dengan hasilnya.

— Nohl
sumber

Ini untuk membuat video di iframe responsif, berfungsi dengan baik, terima kasih!

— Ricardo

11

Kode paling sederhana untuk menyelaraskan elemen iframe:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

— Tushar Soni
sumber

Silakan lihat ini terlebih dahulu bagaimana menjawabnya. Pertanyaan ini dijawab sebelumnya, jelas, Anda dapat menambahkan jawaban Anda di sini. Tetapi Anda Perlu memahami beberapa poin sebelum menjawab. Pertama, jangan tambahkan jawaban yang sebelumnya ditambahkan dengan kode atau saran yang sama. Kedua, jangan menambahkan jawaban yang terlalu rumit jika pengguna telah bertanya secara khusus tentang masalah dan apa yang dia butuhkan untuk menyelesaikannya. Ketiga, Anda dapat menambahkan komentar jika Anda ingin menyarankan sesuatu mengenai jawaban atau pertanyaan.

— ankit suthar

6

Anda dapat meletakkan iframe di dalam a <div>

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

Ini berfungsi karena sekarang berada di dalam elemen blok.

— Sonal Khunt
sumber

3

Menurut http://www.w3schools.com/css/css_align.asp , mengatur margin kiri dan kanan untuk secara otomatis menentukan bahwa mereka harus membagi margin yang tersedia secara merata. Hasilnya adalah elemen terpusat:

margin-left: auto;margin-right: auto;

— boussac
sumber

1

Hanya jika elemen induk memiliki gaya teks-align diatur ke pusat.

— parvus

3

Anda dapat mencoba

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

Semoga bermanfaat untuk Anda

tautan

— Kael
sumber

1

Dalam kasus saya solusi ada di kelas iframe menambahkan:

    display: block;
    margin-right: auto;
    margin-left: auto;

— Nezir
sumber

0

Di sini saya telah menempatkan potongan untuk Anda semua yang menderita untuk membuat iframe atau gambar di tengah layar secara horizontal. Berikan aku THUMBS UP VOTE jika kamu mau .👍⯅.

style> img & iframe> ini adalah nama tag Anda, jadi ubah bahwa jika Anda menginginkan tag lain di tengah

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

Luaskan cuplikan

— Manthan Patel
sumber