Comment centrer un iframe horizontalement?


234

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

HTML:

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

CSS:

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

Résultat:

entrez la description de l'image ici

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


6
pourquoi ne pas envelopper un div pour cet iframe?
Giberno

Réponses:


384

Ajoutez display:block;à votre iframe css.


28
Merci! J'aurais dû deviner qu'un inline frameest un élément en ligne :)
Misha Moroshko

34
C'est ce que signifie le «i».
Aayush

11
Donc, alternativement, vous pouvez donner une text-align: centerrègle au conteneur, n'est-ce pas?
KOVIKO

1
oui l'ajout de text-align: le centre du conteneur fonctionnerait aussi
chrisweb

9
J'ai trouvé que je devais aussi ajoutermargin: auto;
MarkyDD

45

La meilleure façon 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.


1
Je pensais que l' alignattribut était obsolète? Pourquoi l'OP devrait-il utiliser cette approche au lieu d'utiliser CSS - quel est l'avantage?
andrewsi

4
style="text-align:center"n'est pas déconseillé et ferait le même travail
Anthony

même s'il est amorti, cela fonctionne, alors que tout le reste ne fonctionne pas.
user819490

Cela fonctionne dans le fichier HTML et est donc plus facile à implémenter pour les newbs comme moi. Je viens de le faire en 2017 donc il ne faut pas l'amortir. Merci pour le conseil!
Renel Chesak

20

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;

}

11

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 sur la largeur du fluide

Selon la source vidéo et si vous souhaitez que les anciennes vidéos deviennent réactives, vos tactiques devront 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 j'étais satisfait des résultats.


C'est pour rendre la vidéo dans l'iframe responsive, ça marche bien, merci!
Ricardo

11

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 déjà répondu à cette question, évidemment, vous pouvez ajouter votre réponse ici. Mais vous devez comprendre certains points avant de répondre. Tout d'abord, n'ajoutez pas une réponse qui a déjà été ajoutée avec le même code ou la même suggestion. Deuxièmement, n'ajoutez pas une réponse trop compliquée si l'utilisateur a posé une question très précise sur le problème et ce dont il a besoin pour le résoudre. Troisièmement, vous pouvez ajouter un commentaire si vous souhaitez suggérer quoi que ce soit concernant la réponse ou la question.
ankit suthar

6

Vous pouvez mettre iframe dans un <div>

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

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


3

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

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

1
Uniquement si l'élément parent a un style d'alignement de texte défini au centre.
parvus

3

Tu peux essayer

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

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

lien


1

Dans mon cas, la solution était sur la classe iframe en ajoutant:

    display: block;
    margin-right: auto;
    margin-left: auto;

0

Ici, j'ai mis un extrait pour tous ceux qui souffrent de faire une iframe ou une image au centre de l'écran horizontalement. Donnez-moi un VOTE DE POUCE si vous le souhaitez.👍⯅.

style> img & iframe> c'est le nom de votre balise, changez donc si vous voulez une autre balise au centre

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.