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 la iframe
n’est pas centrée comme le div
? Comment pourrais-je l'aligner centralement?
Ajoutez display:block;
à votre css iframe.
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.
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;
}
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.
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>
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.
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;
Tu peux essayer
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
J'espère que cela vous sera utile