Como centralizar um iframe horizontalmente?

234

Considere o seguinte exemplo: ( demonstração ao vivo )

HTML:

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

CSS:

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

Resultado:

insira a descrição da imagem aqui

Por que o iframenão está alinhado centralmente como o div? Como eu poderia alinhá-lo centralmente?

— Misha Moroshko
fonte

6

por que não agrupar uma div para esse iframe?

— Giberno

384

Adicione display:block;ao seu iframe css.

— Alohci
fonte

28

Obrigado! Eu devia ter adivinhado que um inline frameé um elemento inline :)

— Misha Moroshko

34

Então é isso que o "i" significa.

— Aayush

11

Então, alternativamente, você pode definir uma text-align: centerregra para o contêiner , correto?

— KOVIKO

1

sim adicionando text-align: center para o contêiner iria trabalhar muito

— chrisweb

9

Eu descobri que eu também tive que adicionarmargin: auto;

— MarkyDD

45

A melhor maneira e mais simples de centralizar um iframe na sua página da web é:

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

onde largura e altura terão o tamanho do seu iframe na sua página html.

— Pedro
fonte

1

Eu pensei que o alignatributo estava obsoleto? Por que o OP deve usar essa abordagem em vez de usar CSS - qual é a vantagem?

— precisa

4

style="text-align:center"não é obsoleto e faria o mesmo trabalho

— Anthony

mesmo sendo depreciado, isso funciona, enquanto todo o resto não funciona.

— user819490

Isso funciona no arquivo HTML e, portanto, é mais fácil para os novatos como eu implantar. Acabei de fazer isso em 2017, para que não seja depreciado. Obrigado pela dica!

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

11

Se você estiver colocando um vídeo no iframe e desejar que seu layout seja fluido, consulte esta página da Web: Vídeo com largura de fluido

Dependendo da fonte de vídeo e se você quiser que vídeos antigos se tornem responsivos, suas táticas precisarão ser alteradas.

Se este é seu primeiro vídeo, aqui está uma solução simples:

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

E adicione 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 snippet

Isenção de responsabilidade: nada disso é meu código, mas eu o testei e fiquei satisfeito com os resultados.

— Nohl
fonte

Isso é para tornar o vídeo no iframe responsivo, funciona bem, obrigado!

— Ricardo

11

O código mais simples para alinhar o elemento iframe:

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

— Tushar Soni
fonte

Por favor, veja este primeiro como responder Esta pergunta foi respondida antes, obviamente, você pode adicionar sua resposta aqui. Mas você precisa entender alguns pontos antes de responder. Primeiro, não adicione uma resposta que foi adicionada anteriormente com o mesmo código ou sugestão. Segundo, não adicione uma resposta excessivamente complicada se o usuário tiver perguntado muito especificamente sobre o problema e o que ele precisa para resolver isso. Terceiro, você pode adicionar um comentário se quiser sugerir algo sobre a resposta ou a pergunta.

— Ankit suthar

6

Você pode colocar iframe dentro de um <div>

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

Funciona porque agora está dentro de um elemento de bloco.

— Sonal Khunt
fonte

3

De acordo com http://www.w3schools.com/css/css_align.asp , definir as margens esquerda e direita como automáticas especifica que eles devem dividir a margem disponível igualmente. O resultado é um elemento centralizado:

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

— boussac
fonte

1

Somente se o elemento pai tiver o estilo de alinhamento de texto definido como centralizado.

— parvus

3

Podes tentar

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

Espero que seja útil para você

ligação

— Kael
fonte

1

No meu caso, a solução estava na classe iframe, adicionando:

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

— Nezir
fonte

0

Aqui eu coloquei um trecho para todos vocês que estão sofrendo para criar iframe ou imagem no centro da tela horizontalmente. Dê-me THUMBS UP VOTE, se quiser.

style> img & iframe> esse é o nome da sua tag, então mude para que, se você quiser alguma outra tag no 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 snippet

— Manthan Patel
fonte