Come centrare un iframe orizzontalmente?

Question

consideri il seguente esempio: (live demo)

HTML:

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

CSS:

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

Risultato:

Perché iframe non è allineato centralmente come lo div? Come potrei allinearlo centralmente?

Answer 1

Aggiungi display:block; ai tuoi iframe css.

Answer 2

si può mettere IFRAME all'interno di un <div>

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

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

Answer 3

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; 

} 

Answer 4

Secondo , impostando i margini destro e sinistro per l'auto specifica che essi dovrebbero dividere il margine disponibile allo stesso modo. Il risultato è un elemento centrato:

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

Answer 5

Se si sta mettendo un video nel iframe e si desidera che il layout di essere fluido, si dovrebbe guardare a questa pagina web: Fluid Width Video

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

Se questo è il vostro primo video, ecco un semplice soluzione:

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

e aggiungi a css:

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

Disclaimer: niente di questo è il mio codice, ma l'ho testato ed è stato soddisfatto dei risultati.

Answer 6

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

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

dove larghezza e l'altezza sarà la dimensione del vostro iframe nella pagina HTML.

Answer 7

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>