¿Cómo centrar un iframe horizontalmente?

175

Consideremos el siguiente ejemplo: (live demo)¿Cómo centrar un iframe horizontalmente?

HTML:

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

CSS:

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

Resultado:

enter image description here

Por qué la iframe no está alineado en el centro como el div? ¿Cómo podría alinearlo centralmente?

Fuente

2011-12-03 Misha Moroshko

por qué no envolver un div para este iframe? – Giberno

297

Agregue display:block; a su iframe css.

Fuente

2011-12-03 10:14:49 Alohci

+21

¡Gracias! Debería haber supuesto que un 'marco en línea' es un elemento en línea :) –

+25

Así que eso es lo que significa la" i ". – Aayush

Entonces, alternativamente, puede darle al contenedor una regla 'text-align: center', ¿correcto? – Koviko

Se puede retener dentro de un iframe <div>

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

Funciona porque ahora está dentro de un elemento de bloque.

Fuente

2011-12-03 10:18:17

probado: no funciona – user819490

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; 

}

Fuente

2011-12-03 10:20:13 mgraph

Según , establecer los márgenes izquierdo y derecho para auto especifica que se debe dividir el margen disponible por igual. El resultado es un elemento de centrado:

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

Fuente

2014-09-25 16:18:40 boussac

Solo si el elemento padre tiene estilo text-align establecido en center. – parvus

Si va a colocar un video en el iframe y quiere que su diseño sea fluida, usted debe buscar en esta página web: Fluid Width Video

Dependiendo de la fuente de vídeo y si quieres que los videos antiguos sean receptivos, tus tácticas deberán cambiar.

Si este es su primer video, aquí es una solución simple:

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

y añadir 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%; 
 
}

Descargo de responsabilidad: nada de esto es mi código, pero lo he probado y estoy contento con los resultados.

Fuente

2014-10-13 18:38:23 Nohl

mejor manera y más sencillo para centrar un iframe en su página web es:

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

donde anchura y la altura será el tamaño de su marco flotante en su página HTML.

Fuente

2015-11-15 14:18:56 pedro

Pensé que el atributo 'align' estaba en desuso? ¿Por qué el OP debería usar este enfoque en lugar de usar CSS? ¿Cuál es la ventaja? – andrewsi

'style =" text-align: center "' no está en desuso y haría el mismo trabajo – Anthony

aunque se haya depreciado, esto funciona, mientras que todo lo demás no. – user819490

El código más simple para alinear el elemento iframe:

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

Fuente

2017-07-18 15:46:40

Por favor, vea este primero cómo responder. Esta pregunta se responde antes, obviamente, puede agregar su respuesta aquí. Pero necesitas entender algunos puntos antes de responder. Primero, no agregue una respuesta que se haya agregado previamente con el mismo código o sugerencia. Segundo, no agregue una respuesta demasiado complicada si el usuario ha preguntado muy específicamente sobre el problema y lo que necesita para resolverlo. En tercer lugar, puede agregar un comentario si desea sugerir algo con respecto a la respuesta o pregunta. –

¿Cómo centrar un iframe horizontalmente?

Respuesta

Cuestiones relacionadas