¿Cómo centrar un iframe horizontalmente?

234

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:

ingrese la descripción de la imagen aquí

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

html css iframe alignment center-align Misha Moroshko
fuente
66
¿Por qué no envolver un div para este iframe?
Giberno

Respuestas:

384

Agregue display:block;a su iframe css.

Alohci
fuente
28
¡Gracias! Debería haber adivinado que un inline framees un elemento en línea :)
Misha Moroshko
34
Entonces eso es lo que representa la "i".
Aayush
11
Entonces, alternativamente, puedes darle una text-align: centerregla al contenedor , ¿correcto?
KOVIKO
1
sí, agregar text-align: center al contenedor también funcionaría
chrisweb 05 de
99
Descubrí que también tenía que agregarmargin: auto;
MarkyDD
45

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án el tamaño de su iframe en su página html.

pedro
fuente
1
¿Pensé que el alignatributo estaba en desuso? ¿Por qué el OP debería usar este enfoque en lugar de CSS? ¿Cuál es la ventaja?
andrewsi
44
style="text-align:center"no está en desuso y haría el mismo trabajo
Anthony
a pesar de que se deprecia, esto funciona, mientras que todo lo demás no.
user819490
Esto funciona en el archivo HTML y, por lo tanto, es más fácil de implicar para novatos como yo. Lo acabo de hacer en 2017, por lo que no debe depreciarse. ¡Gracias por el consejo!
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
fuente
11

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

Dependiendo de la fuente de video y si desea que los videos antiguos respondan, sus tácticas deberán cambiar.

Si este es su 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>
Expandir fragmento

Y agregue 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%;
}
Expandir fragmento

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

Nohl
fuente
Esto es para que el video en el iframe responda, funciona bien, ¡gracias!
Ricardo
11

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>
Tushar Soni
fuente
Por favor, consulte este primer tutorial. Esta pregunta se responde antes, obviamente, puede agregar su respuesta aquí. Pero debe comprender algunos puntos antes de responder. Primero, no agregue una respuesta que se haya agregado previamente con el mismo código o sugerencia. En segundo lugar, no agregue una respuesta demasiado complicada si el usuario ha preguntado muy específicamente sobre el problema y qué necesita para resolverlo. Tercero, puede agregar un comentario si desea sugerir algo con respecto a la respuesta o pregunta.
ankit suthar
6

Puedes poner iframe dentro de un <div>

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

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

Sonal Khunt
fuente
3

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;
boussac
fuente
1
Solo si el elemento padre tiene un estilo de alineación de texto establecido en el centro.
parvus
3

Puedes probar 

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

Espero que sea útil para ti

enlace

Kael
fuente
1

En mi caso, la solución estaba en la clase iframe agregando:

    display: block;
    margin-right: auto;
    margin-left: auto;
Nezir
fuente
0

Aquí he puesto un fragmento para todos los que están sufriendo para hacer un iframe o una imagen en el centro de la pantalla horizontalmente. Dame un VOTO DE PULGARES si quieres.

style> img & iframe> este es el nombre de su etiqueta, así que cámbielo si desea alguna otra etiqueta en el 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>
Expandir fragmento

Manthan Patel
fuente