in

html – ¿Cómo centrar un iframe horizontalmente?

apple touch icon@2

html – ¿Cómo centrar un iframe horizontalmente? – Desbordamiento de pila


















Pedido

Visto519k veces

Considere el siguiente ejemplo: (demo 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í

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

1

Agregar display:block; a su iframe css.

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

iframe {
    display: block;
    border-style:none;
}
<div>div</div>
<iframe src="https://stackoverflow.com/questions/8366957/data:,iframe"></iframe>

7

La mejor forma y más sencilla de centrar un iframe en su página web es:

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

donde el ancho y el alto serán el tamaño de su iframe en su página html.

5

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;

}

0

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>

1

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 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í tiene una solución simple:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

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%;
}

Descargo de responsabilidad: nada de esto es mi código, pero lo probé y quedé satisfecho con los resultados.

1

Puede poner iframe dentro de un <div>

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

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

0

Puedes probar

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

Espero que te sea de utilidad

Enlace

1

Mi solución más simple para esto.

iframe {
    margin:auto;
    display:block;
}

De acuerdo a http://www.w3schools.com/css/css_align.asp, configurar los márgenes izquierdo y derecho en automático especifica que deben dividir el margen disponible en partes iguales. El resultado es un elemento centrado:

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

1

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

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

Si no puede acceder a la clase iFrame, agregue el CSS a continuación al div contenedor.

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

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 de forma horizontal. Dame PULGARES ARRIBA VOTO si quieres 👍⯅.

estilo> img e iframe> este es el nombre de su etiqueta, así que cámbielo si desea cualquier 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="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

lang-html

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

computer programming

Tutorial de programación informática

gfg 200x200 min

Bloqueo de mutex para la sincronización de subprocesos de Linux

Back to Top
close