Comment centrer un iframe horizontalement?

Prenons l’exemple suivant: ( démo en direct )

HTML:

div

CSS:

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

Résultat:

entrer la description de l'image ici

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

Ajouter un display:block; à votre iframe css.

La meilleure façon et plus simple de centrer un iframe sur votre page Web est la suivante:

 

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

HTML:

 
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 voulez que votre mise en page soit fluide, vous devriez regarder cette page Web: Vidéo sur la largeur de fluide

Selon la source vidéo et si vous souhaitez que vos anciennes vidéos deviennent réactives, vos tactiques devront être modifiées.

S’il s’agit de votre première vidéo, voici une solution simple:

 

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

 

Vous pouvez mettre l’iframe dans un

 

Cela fonctionne parce qu’il est maintenant dans un élément de bloc.

Selon le site http://www.w3schools.com/css/css_align.asp , définir les marges gauche et droite sur auto indique qu’elles doivent diviser la marge disponible également. Le résultat est un élément centré:

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

Tu peux essayer

 

J’espère que c’est utile pour vous

lien