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?

html css iframe alignment center-align Misha Moroshko
la source

6

pourquoi ne pas envelopper un div pour cet iframe?

Giberno

384

Ajoutez display:block;à votre iframe css.

Alohci
la source

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.

pedro
la source

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;

}

mgraph
la source

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>

Développer l'extrait

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%;
}

Développer l'extrait

Avertissement: rien de tout cela n'est mon code, mais je l'ai testé et j'étais satisfait des résultats.

Nohl
la source

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>

Tushar Soni
la source

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.

Sonal Khunt
la source

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;

boussac
la source

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

Kael
la source

1

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

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

Nezir
la source

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>

Développer l'extrait

Manthan Patel
la source

Comment centrer un iframe horizontalement?

Réponses: