Comment centrer un iframe horizontalement ?

Question

Prenons l'exemple suivant : ( Démonstration en direct )

HTML :

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

CSS :

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

Résultat :

Pourquoi le iframe n'est pas aligné au centre comme le div ? Comment pourrais-je l'aligner au centre ?

Answer 1

Ajouter display:block; à votre css iframe.

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

iframe {
    display: block;
    border-style:none;
}

<div>div</div>
<iframe src="data:,iframe"></iframe>

Answer 2

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;

}

Answer 3

Si vous placez une vidéo dans l'iframe et que vous voulez que votre mise en page soit fluide, vous devriez consulter cette page Web : Vidéo sur la largeur des fluides

Selon la source de la vidéo et si vous souhaitez que les anciennes vidéos deviennent réactives, votre tactique devra changer.

Si c'est votre première vidéo, voici une solution 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>

Et ajoutez ce 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%;
}

Avertissement : rien de tout cela n'est mon code, mais je l'ai testé et j'ai été satisfait des résultats.

Answer 4

Vous pouvez placer un iframe à l'intérieur d'un <div>

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

Cela fonctionne parce qu'il se trouve maintenant à l'intérieur d'un élément de bloc.

Answer 5

Selon http://www.w3schools.com/css/css_align.asp Si vous définissez les marges gauche et droite sur "auto", cela signifie qu'elles doivent se partager la marge disponible de manière égale. Le résultat est un élément centré :

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