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


6
dlaczego nie zawinąć div dla tego iframe?
Giberno,

Odpowiedzi:


384

Dodaj display:block;do swojego iframe css.


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.


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;

}

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>

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

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


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>

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.


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;

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ć


1

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

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

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.