Comment faire pour centrer un iframe à l'horizontale?

Considérons 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:

Comment faire pour centrer un iframe à l'horizontale?

Pourquoi le iframe n'est pas centralisée aligné comme le div? Comment pourrais-je de manière centralisée l'aligner?

  • pourquoi ne pas envelopper un div pour cette iframe?
InformationsquelleAutor Misha Moroshko | 2011-12-03
  1. 345

    Ajouter display:block; à votre iframe css.

    • Merci! J'aurais deviné qu'un inline frame est un élément inline 🙂
    • C'est ce que le "i" signifie.
    • Ainsi, alternativement, vous pouvez donner le conteneur d'un text-align: center règle, correct?
    • oui, l'ajout de texte-align: center pour le conteneur de travail trop
    • J'ai trouvé moi aussi j'ai du ajouter margin: auto;
    • Droit - le cas des OP question avait déjà bien.
    • class="d-block mx-auto" sur mon <iframe> satisfait (à l'aide de bootstrap 4.0.0-bêta.3)
    • margin: 0 auto; display: block; Ça fonctionne.

    InformationsquelleAutor Alohci
  2. 31

    meilleur moyen et le plus simple pour centrer un iframe sur votre page web est :

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

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

    • Je pensais que le align attribut est obsolète? Pourquoi l'OP utiliser cette approche au lieu de l'aide de CSS - quel est l'avantage?
    • style="text-align:center" n'est pas obsolète et ferait le même travail
    • même si il est amorti, cela fonctionne, tandis que tout le reste ne fonctionne pas.
    • Cela fonctionne dans le fichier HTML et est donc plus facile pour les newbs comme moi de impliment. Je l'ai juste fait en 2017, donc il ne doit pas être amortis. Merci pour l'astuce!
    InformationsquelleAutor pedro
  3. 19

    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;

}
    InformationsquelleAutor mgraph
  4. 10

    Si vous êtes en train de mettre une vidéo dans l'iframe et vous voulez que votre mise en page pour être fluide, vous devriez regarder cette page: Fluide Largeur De La Vidéo

    En fonction de la source vidéo et si vous voulez avoir de vieilles vidéos deviennent réceptifs à votre tactique aura besoin de changement.

    Si c'est votre première vidéo, voici une solution simple:

    HTML:

    <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 ajouter ce css:

    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 est de mon code, mais je l'ai testé et il a été heureux avec les résultats.

    InformationsquelleAutor Nohl
  5. 7

    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>
    • Veuillez voir cette première façon de répondre à Cette question, il est répondu avant, évidemment, vous pouvez ajouter votre réponse ici. Mais Vous Devez comprendre certains points avant de répondre. Tout d'abord, ne pas ajouter une réponse qui est déjà ajouté avec le même code ou d'une suggestion. Deuxièmement, ne pas ajouter trop compliqué de répondre si l'utilisateur a demandé très précisément sur le problème et qu'il a besoin de résoudre ce problème. Troisièmement, Vous pouvez ajouter un commentaire si vous le souhaitez suggérer quelque chose au sujet de la réponse ou question.
    InformationsquelleAutor Tushar Soni
  6. 6

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

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

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

    • testé, ça ne fonctionne pas
    InformationsquelleAutor Sonal Khunt
  7. 3

    Selon http://www.w3schools.com/css/css_align.asp, définissant les marges gauche et droite pour auto indique qu'ils doivent diviser la marge disponible également. Le résultat est centrée élément:

    margin-left: auto;margin-right: auto;
    • Seulement si l'élément parent a style text-align centre.
    InformationsquelleAutor boussac
  8. 3

    Vous pouvez essayer 

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

    Je l'espère, il est utile pour vous

    lien

    InformationsquelleAutor Kael