html - imagen - ¿Cómo centrar un iframe horizontalmente?

como centrar una imagen en iframe

Question

Considere el siguiente ejemplo: ( demostración en vivo )

HTML:

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

CSS:

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

Resultado:

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

Answer 1

Añadir display:block; a su iframe css.

Answer 2

De acuerdo con http://www.w3schools.com/css/css_align.asp , establecer los márgenes izquierdo y derecho en auto especifica que deben dividir el margen disponible por igual. El resultado es un elemento centrado:

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

Answer 3

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>

Answer 4

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 5

La mejor manera y más simple de 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 ancho y alto será el tamaño de su iframe en su página html.

Answer 6

Puedes poner el iframe dentro de un <div>

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

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

Answer 7

Puedes probar

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

Espero que sea útil para ti

link

Answer 8

Si está colocando un video en el iframe y desea que su diseño sea fluido, debe consultar esta página web: Video de Fluid Width

Dependiendo de la fuente del video y si desea que los videos viejos se vuelvan receptivos, sus tácticas deberán cambiar.

Si este es tu primer video, aquí hay 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ñade este 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%;
}

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