Jak wyśrodkować iframe w poziomie?

234

Rozważ następujący przykład: ( demo na żywo )

HTML:

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

CSS:

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

Wynik:

wprowadź opis zdjęcia tutaj

Dlaczego iframenie jest centralnie wyrównany jak div? Jak mogę centralnie to wyrównać?

html css iframe alignment center-align Misza Moroszko
źródło
6
dlaczego nie zawinąć div dla tego iframe?
Giberno,

Odpowiedzi:

384

Dodaj display:block;do swojego iframe css.

Alohci
źródło
28
Dzięki! Powinienem był się domyślić, że an inline framejest elementem wbudowanym :)
Misha Moroshko,
34
To właśnie oznacza „i”.
Aayush,
11
Alternatywnie możesz nadać kontenerowi text-align: centerregułę, prawda?
KOVIKO
1
tak, dodanie wyrównania tekstu: środek do kontenera też by działał
chrisweb
9
Stwierdziłem, że muszę również dodaćmargin: auto;
MarkyDD
45

najlepszym i prostszym sposobem na wyśrodkowanie ramki iframe na stronie jest:

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

gdzie szerokość i wysokość będą odpowiadały rozmiarowi elementu iframe na stronie HTML.

Pedro
źródło
1
Myślałem, że alignatrybut jest przestarzały? Dlaczego PO powinien stosować to podejście zamiast CSS - jaka jest zaleta?
andrewsi
4
style="text-align:center"nie jest przestarzały i wykonałby tę samą pracę
Anthony
nawet jeśli jest amortyzowane, to działa, podczas gdy wszystko inne nie.
user819490,
Działa to w pliku HTML, a tym samym newbom takim jak ja łatwiej jest wszczepić. Właśnie to zrobiłem w 2017 roku, więc nie można go amortyzować. Dzięki za wskazówkę!
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
źródło
11

Jeśli umieszczasz wideo w ramce iframe i chcesz, aby Twój układ był płynny, powinieneś spojrzeć na tę stronę internetową: Płynna szerokość wideo

W zależności od źródła wideo i jeśli chcesz, aby stare filmy reagowały, twoja taktyka będzie musiała się zmienić.

Jeśli to Twój pierwszy film, oto proste rozwiązanie:

<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>
Rozwiń fragment kodu

I dodaj ten css:

.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%;
}
Rozwiń fragment kodu

Oświadczenie: nic z tego nie jest moim kodem, ale przetestowałem go i byłem zadowolony z wyników.

Nohl
źródło
To sprawia, że ​​wideo w ramce iframe reaguje, działa dobrze, dziękuję!
Ricardo
11

Najprostszy kod do wyrównania elementu iframe:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
Tushar Soni
źródło
Zapoznaj się z pierwszym poradnikiem na to pytanie. Odpowiedź na to pytanie jest oczywiście możliwa, oczywiście, tutaj możesz dodać swoją odpowiedź. Ale musisz odpowiedzieć na kilka punktów, zanim odpowiesz. Po pierwsze, nie dodawaj odpowiedzi, która została wcześniej dodana z tym samym kodem lub sugestią. Po drugie, nie dodawaj zbyt skomplikowanej odpowiedzi, jeśli użytkownik zapytał bardzo konkretnie o problem i to, co musi rozwiązać. Po trzecie, możesz dodać komentarz, jeśli chcesz coś zasugerować w odniesieniu do odpowiedzi lub pytania.
ankit suthar
6

Możesz umieścić iframe wewnątrz <div>

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

Działa, ponieważ znajduje się teraz w elemencie bloku.

Sonal Khunt
źródło
3

Zgodnie z http://www.w3schools.com/css/css_align.asp , ustawienie lewego i prawego marginesu na auto oznacza, że ​​powinny one równo podzielić dostępny margines. Rezultatem jest wyśrodkowany element:

margin-left: auto;margin-right: auto;
boussac
źródło
1
Tylko jeśli element nadrzędny ma styl wyrównywania tekstu ustawiony na środku.
parvus,
3

Możesz spróbować 

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

Mam nadzieję, że ci się przyda

połączyć

Kael
źródło
1

W moim przypadku rozwiązanie dotyczyło klasy iframe, dodając:

    display: block;
    margin-right: auto;
    margin-left: auto;
Nezir
źródło
0

Tutaj umieściłem urywek dla was wszystkich, którzy cierpicie, aby iframe lub obraz znajdował się pośrodku ekranu w poziomie. Daj mi GŁOSKI NA GŁOS, jeśli chcesz.

style> img & iframe> to jest nazwa twojego tagu, więc zmień ją, jeśli chcesz mieć inny tag na środku

<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>
Rozwiń fragment kodu

Manthan Patel
źródło