web-dev-qa-db-fra.com

Comment centrer un iframe horizontalement?

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:

enter image description here

Pourquoi la iframe n’est pas centrée comme le div? Comment pourrais-je l'aligner centralement?

htmlcssiframealignmentcenter-align
214
Misha Moroshko

Ajoutez display:block; à votre css iframe.

355
Alohci

le meilleur moyen et plus simple de centrer un iframe sur votre page Web est:

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

où largeur et hauteur seront la taille de votre iframe dans votre page html.

32
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

Si vous mettez une vidéo dans l'iframe et que vous souhaitez que votre mise en page soit fluide, vous devriez consulter cette page Web: Vidéo de largeur fluide

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

S'il s'agit de 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 je suis satisfait des résultats.

10
Nohl

Le code le plus simple pour aligner l'élément iframe:

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

Vous pouvez mettre iframe dans un <div>

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

Cela fonctionne car il est maintenant à l'intérieur d'un élément de bloc.

6
Sonal Khunt

Selon http://www.w3schools.com/css/css_align.asp , définir les marges gauche et droite sur auto indique qu'elles doivent scinder la marge disponible de manière égale. Le résultat est un élément centré:

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

Tu peux essayer

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

J'espère que cela vous sera utile

lien

3
Kael