Come centrare un iframe in orizzontale?

234

Considera il seguente esempio: ( demo live )

HTML:

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

CSS:

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

Risultato:

inserisci qui la descrizione dell'immagine

Perché il iframenon è allineato centralmente come il div? Come potrei allinearlo centralmente?

— Misha Moroshko
fonte

6

perché non avvolgere un div per questo iframe?

— Giberno,

384

Aggiungi display:block;al tuo iframe css.

— Alohci
fonte

28

Grazie! Avrei dovuto indovinare che an inline frameè un elemento inline :)

— Misha Moroshko il

34

Ecco cosa significa "i".

— Aayush,

11

Quindi, in alternativa, puoi dare una text-align: centerregola al contenitore , giusto?

— KOVIKO,

1

sì, aggiungendo text-align: funzionerebbe anche il centro del contenitore

— chrisweb,

9

Ho scoperto che dovevo anche aggiungeremargin: auto;

— MarkyDD il

45

il modo migliore e più semplice per centrare un iframe sulla tua pagina web è:

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

dove larghezza e altezza saranno le dimensioni del tuo iframe nella tua pagina html.

— pedro
fonte

1

Pensavo che l' alignattributo fosse obsoleto? Perché l'OP dovrebbe usare questo approccio invece di usare i CSS: qual è il vantaggio?

— andrewsi,

4

style="text-align:center"non è deprecato e farebbe lo stesso lavoro

— Anthony,

anche se è ammortizzato, funziona, mentre tutto il resto no.

— user819490

Funziona nel file HTML ed è quindi più facile da implementare per i principianti come me. L'ho appena fatto nel 2017, quindi non deve essere ammortizzato. Grazie per il consiglio!

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

11

Se stai inserendo un video nell'iframe e vuoi che il tuo layout sia fluido, dovresti guardare questa pagina web: Fluid Width Video

A seconda della fonte video e se vuoi che i vecchi video diventino reattivi, le tue tattiche dovranno cambiare.

Se questo è il tuo primo video, ecco una soluzione semplice:

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

Espandi frammento

E aggiungi questo 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%;
}

Espandi frammento

Disclaimer: niente di tutto questo è il mio codice, ma l'ho provato ed ero soddisfatto dei risultati.

— Nohl
fonte

Questo per rendere il video in iframe reattivo, funziona bene, grazie!

— Ricardo,

11

Il codice più semplice per allineare l'elemento iframe:

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

— Tushar Soni
fonte

Si prega di consultare questa prima domanda per rispondere a questa domanda prima, ovviamente, è possibile aggiungere la risposta qui. Ma devi capire alcuni punti prima di rispondere. Innanzitutto, non aggiungere una risposta precedentemente aggiunta con lo stesso codice o suggerimento. In secondo luogo, non aggiungere una risposta eccessivamente complicata se l'utente ha chiesto in modo molto specifico il problema e di cosa ha bisogno per risolverlo. Terzo, puoi aggiungere un commento se vuoi suggerire qualcosa riguardo la risposta o la domanda.

— ankit suthar,

6

Puoi inserire iframe in a <div>

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

Funziona perché ora è all'interno di un elemento a blocchi.

— Sonal Khunt
fonte

3

Secondo http://www.w3schools.com/css/css_align.asp , l'impostazione dei margini sinistro e destro su auto specifica che devono dividere equamente il margine disponibile. Il risultato è un elemento centrato:

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

— boussac
fonte

1

Solo se l'elemento parent ha lo stile text-align impostato su center.

— parvus

3

Puoi provare

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

Spero sia utile per te

collegamento

— Kael
fonte

1

Nel mio caso la soluzione era in classe iframe aggiungendo:

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

— Nezir
fonte

0

Qui ho messo lo snippet per tutti voi che soffrite per creare iframe o immagine al centro dello schermo in orizzontale. Dammi GRAZIE VOTA se vuoi. 👍⯅.

style> img & iframe> questo è il nome del tuo tag, quindi cambialo se vuoi un altro tag al centro

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

Espandi frammento

— Manthan Patel
fonte