Centre une iframe à l'horizontale

Ce morceau de code efficacement les centres de l'iframe, mais sur leur gauche bord pas de leur centre.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Videos</title>
    <style>
        div.center {
            width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body style="background: lightblue">
    <div class="center">
        <iframe src="http://www.youtube.com/embed/dgZ-K87NcwQ"></iframe>
        <p />
        <iframe src="http://www.dailymotion.com/embed/video/xoy7jd"></iframe>
    </div>
</body>
</html>

J'ai vu ces questions :

Malheureusement aucun n'a fonctionné pour moi.

Comment vraiment centre de ceux-ci sur l'écran ?

Dans le HTML, ne pas écrire <p />. Il ne fait pas ce que vous pensez que cela fonctionne. Voir ce violon. Vous pourriez le faire en XHTML, mais il serait fortement déconseillées. Pas dans le HTML. Et d'ailleurs, vous ne devez pas utiliser les paragraphes de l'espacement vertical.
Droit, dois-je utiliser des <br/> à la place ?
Pas de. Donner la iframes display:block et alors vous pouvez mettre des marges sur eux.

OriginalL'auteur Aybe | 2013-06-15

12

Le problème est que votre iframes sont plus larges que 200px (la largeur fixe que vous avez défini pour leur centrée div contenant). Ce sera la cause de leur excès de largeur de déborder sur la droite boundry de la div.

En fonction de la structure complète de votre site, essayez de mettre l'auto marge directement sur les iframes.
```
div.center iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
```
Démo: http://jsfiddle.net/NvfKu/

Excellent, merci !
peut simplifier à l' -> display: block; margin: 0 auto;

OriginalL'auteur Matt Rohland

Vous devez vous connecter pour publier un commentaire.