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?

html css iframe alignment center-align Misha Moroshko
sumber
6
mengapa tidak membungkus div untuk iframe ini?
Giberno

Jawaban:

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