web-dev-qa-db-fra.com

Comment aligner iframe toujours au centre

J'ai un iframe entouré d'un élément div et j'essaie simplement de le positionner toujours au centre . Voici mon effort jsfiddle: jsfiddle

et vraiment croire que quelqu'un pourrait aider parce que je suis sûr que c'est quelque chose de très simple mais je ne peux tout simplement pas le voir.

Voici le code HTML lui-même:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.Apple.com/" scrolling="auto"></iframe>
</div>
htmlcssiframealignment
6
mathinvalidnik

iframe centre

une solution est:

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

css:

div {
  text-align:center;
  width:100%;
}
iframe{
  width: 200px;
}

violon: http://jsfiddle.net/h9gTm/

edit: alignement vertical ajouté

css:

div {
    text-align: center;
    width: 100%;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
}
.iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

violon: http://jsfiddle.net/h9gTm/1/

Edit: solution FLEX

en utilisant display: flex sur le <div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

violon: http://jsfiddle.net/h9gTm/867/

24
Facundo Colombier

Essaye ça:

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}
5
Philip

Je pense que si vous ajoutez la marge: auto; à la div ci-dessous cela devrait fonctionner.

div#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 100%;
    width: 100%;
}
2
Adrian Mann

Vous pouvez facilement utiliser display: table pour aligner verticalement le contenu et text-align: pour centrer horizontalement votre iframe . http://jsfiddle.net/EnmD6/7/

html {
    display:table;
    height:100%;
    width:100%;
}
body {
    display:table-cell;
    vertical-align:middle;
}
#top-element {
    position:absolute;
    top:0;
    left:0;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    text-align:center;
}

version avec table-row http://jsfiddle.net/EnmD6/9/

html {
    height:100%;
    width:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
    margin:0;
}
#top-element {
    display:table-row;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;
}
0
G-Cyr

Si tout ce que vous voulez faire, c'est afficher un iframe sur une page, la solution la plus simple que j'ai pu trouver ne nécessite pas de divs ni de commandes flex:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

Et puis le HTML est juste:

<html>
  <body>
     <iframe ...></iframe>
  </body>
</html>

Si c'est tout ce dont vous avez besoin, vous n'avez pas besoin de divs wrapper pour le faire. Cela fonctionne aussi pour le contenu textuel.

Fiddle .

Aussi ceci semble encore plus simple.

0
Jason C

Première supprimer position:absolute de div#iframe-wrapper iframe, Supprimerposition:fixed et tous les autres css de div#iframe-wrapper

Puis appliquez ce css,

div#iframe-wrapper {
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

FIDDLE DEMO

0
Prasanth K C