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?

html css iframe alignment center-align Misha Moroshko
fonte
6
por que não agrupar uma div para esse iframe?
Giberno

Respostas:

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