Bir iframe'i yatay olarak nasıl ortalayabilirim?

234

Aşağıdaki örneği düşünün: ( canlı demo )

HTML:

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

CSS:

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

Sonuç:

resim açıklamasını buraya girin

Neden iframemerkezi olarak hizalanmamış div? Merkezi olarak nasıl hizalayabilirim?

— Misha Moroshko
kaynak

6

neden bu iframe için bir div sarmalamıyorsunuz?

— Giberno

384

display:block;İframe css'nize ekleyin .

— Alohci
kaynak

28

Teşekkürler! Ben inline framebir satır içi öğe olduğunu tahmin gerekirdi :)

— Misha Moroshko

34

"İ" nin anlamı budur.

— Aayush

11

Yani, dönüşümlü olarak, kaba bir text-align: centerkural verebilirsiniz, değil mi?

— KOVIKO

1

evet metin hizalama ekleyerek: konteynere merkez çok işe

— yarar

9

Ben de eklemek zorunda bulundumargin: auto;

— MarkyDD

45

iframe'i web sayfanızda ortalamanın en iyi yolu ve daha basit olanı:

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

genişlik ve yükseklik html sayfanızdaki iframe'inizin boyutu olacaktır.

— pedro
kaynak

1

alignÖzelliğin kullanımdan kaldırıldığını mı düşündüm ? OP neden CSS kullanmak yerine bu yaklaşımı kullanmalıdır - avantajı nedir?

— andrewsi

4

style="text-align:center"onaylanmadı ve aynı işi yapardı

— Anthony

amortismana rağmen, bu işe yarar, diğer her şey yapmaz.

— user819490

Bu, HTML dosyasında çalışır ve bu nedenle benim gibi yeni başlayanların alışkanlık kazanması daha kolaydır. Sadece 2017'de yaptım, bu yüzden amortismana gerek yok. Bahşiş için teşekkürler!

— 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
kaynak

11

İframe içine bir video koyuyorsanız ve mizanpajınızın akıcı olmasını istiyorsanız, şu web sayfasına bakmalısınız: Fluid Width Video

Video kaynağına bağlı olarak ve eski videoların yanıt vermesini istiyorsanız taktiklerinizin değişmesi gerekecektir.

Bu ilk videonuzsa, basit bir çözüm:

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

Snippet'i genişlet

Ve bu css'i ekleyin:

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

Snippet'i genişlet

Yasal Uyarı: bunların hiçbiri benim kodum değil, ama ben test ve sonuçlardan memnun oldu.

— Nohl
kaynak

Bu, iframe'deki videoyu duyarlı hale getirmek, iyi çalışıyor, teşekkür ederim!

— Ricardo

11

İframe öğesini hizalamak için en basit kod:

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

— Tushar Soni
kaynak

Lütfen bu ilk nasıl cevaplanacağına bakın Bu soru daha önce cevaplanmıştır, açıkçası cevabınızı buraya ekleyebilirsiniz. Ama cevap vermeden önce bazı noktaları anlamalısınız. İlk olarak, daha önce aynı kod veya öneri ile eklenen bir cevap eklemeyin. İkincisi, kullanıcı sorun ve bunu çözmek için neye ihtiyacı olduğunu çok özel olarak sorduysa aşırı derecede karmaşık bir cevap eklemeyin. Üçüncü olarak, cevap veya soru ile ilgili herhangi bir şey önermek isterseniz bir yorum ekleyebilirsiniz.

— ankit suthar

6

İframe'i bir <div>

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

Çalışıyor çünkü artık bir blok öğesinin içinde.

— Sonal Khunt
kaynak

3

Http://www.w3schools.com/css/css_align.asp'ye göre , sol ve sağ kenar boşluklarını otomatik olarak ayarlamak, kullanılabilir kenar boşluğunu eşit olarak bölmeleri gerektiğini belirtir. Sonuç ortalanmış bir öğedir:

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

— Boussac
kaynak

1

Yalnızca üst öğenin merkeze ayarlanmış stil metni hizalaması varsa.

— parvus

3

Deneyebilirsin

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

Umarım senin için yararlıdır

bağlantı

— Kael
kaynak

1

Benim durumumda iframe sınıfı ekleyerek çözüm vardı:

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

— Nezir
kaynak

0

Burada, iframe veya görüntüyü ekranın ortasına yatay olarak yapmak için acı çeken herkes için snippet'i koydum. İsterseniz bana TOPLAMA YARATIN.

style> img & iframe> bu etiket adınızdır, bu nedenle merkezde başka bir etiket istiyorsanız değiştirin

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

Snippet'i genişlet

— Manthan Patel
kaynak