ti-enxame.com

Como centralizar um iframe horizontalmente?

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:

enter image description here

Por que o iframe não está alinhado centralmente como o div? Como eu poderia alinhar isso centralmente?

210
Misha Moroshko

Adicione display:block; ao seu iframe css.

346
Alohci

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 width e height serão o tamanho do seu iframe na sua página html.

31
pedro

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;

}
19
mgraph

Se você estiver colocando um vídeo no iframe e quiser que seu layout seja fluido, consulte esta página da web: Fluid Width Video

Dependendo da fonte de vídeo e se você deseja que os 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>

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

Disclaimer: nada disso é o meu código, mas testei e fiquei feliz com os resultados.

10
Nohl

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>
7
Tushar Soni

Você pode colocar iframe dentro de um <div>

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

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

6
Sonal Khunt

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

margin-left: auto;margin-right: auto;
3
boussac

Podes tentar

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

Espero que seja útil para você

link

3
Kael