it-swarm.com.de

Iframe immer in der Mitte ausrichten

Ich habe ein von div-Element umgebenes iframe und ich versuche einfach, es immer in der Mitte zu positionieren. Hier ist mein jsfiddle-Aufwand: - jsfiddle

und wirklich glauben, dass jemand helfen könnte, weil ich sicher bin, dass es etwas wirklich einfaches ist, aber ich kann es einfach nicht sehen.

Hier ist der HTML-Code selbst:

<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>
6
mathinvalidnik

zentrum iframe

eine Lösung ist:

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

css:

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

geige: http://jsfiddle.net/h9gTm/

edit: vertikale Ausrichtung hinzugefügt

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

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

Edit: FLEX-Lösung

mit display: flex für den <div>

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

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

24

Versuche dies:

#wrapper {
    text-align: center;
}

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

Ich denke, wenn Sie Marge hinzufügen: auto; auf das div sollte es funktionieren.

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

Sie können display: table problemlos verwenden, um den Inhalt vertikal auszurichten und den Text auszurichten: Richten Sie den iframe horizontal aus . 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 mit Tabellenzeile 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

Wenn Sie nur einen iframe auf einer Seite anzeigen möchten, ist für die einfachste Lösung, die ich finden konnte, keine divs oder flex-Sachen erforderlich:

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

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

Und dann ist das HTML nur:

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

Wenn dies alles ist, brauchen Sie keine Wrapper-Divs. Das funktioniert auch für Textinhalte und so.

Fiddle .

Auch das sieht noch einfacher aus.

0
Jason C

Zuerst remove position:absolute von div#iframe-wrapper iframe, Removeposition:fixed und alle anderen CSS von div#iframe-wrapper

Dann wende dieses CSS an,

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

FIDDLE DEMO

0
Prasanth K C