it-swarm.com.ru

Как выровнять iframe всегда по центру

У меня есть iframe, окруженный элементом div, и я просто пытаюсь расположить его всегда в центре .. Вот мое усилие jsfiddle: jsfiddle

и искренне верю, что кто-то может помочь, потому что я уверен, что это что-то действительно простое, но я просто не могу этого увидеть.

Вот сам HTML:

<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

центр iframe

одним из решений является:

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

cSS:

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

скрипка: http://jsfiddle.net/h9gTm/

edit: добавлено выравнивание по вертикали

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

скрипка: http://jsfiddle.net/h9gTm/1/

Правка: решение FLEX

используя display: flex в <div>

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

скрипка: http://jsfiddle.net/h9gTm/867/

24
Facundo Colombier

Попробуй это:

#wrapper {
    text-align: center;
}

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

Я думаю, если вы добавите поля: авто; до див ниже это должно работать.

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

Вы можете легко использовать display: table для выравнивания по вертикали содержимого и выравнивания текста: по центру для выравнивания по горизонтали вашего 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;
}

версия со строкой таблицы 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

Если все, что вам нужно, - это отображать на странице iframe, самое простое решение, которое мне удалось найти, не требует использования div или flex:

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

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

И тогда HTML просто:

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

Если это все, что вам нужно, вам не нужны div-оболочки для этого. Это работает и для текстового контента, и прочего.

Fiddle .

Также это выглядит еще проще.

0
Jason C

Сначала удалить position:absolute из div#iframe-wrapper iframe, удалитьposition:fixed и все другие css из div#iframe-wrapper

Затем примените этот CSS,

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

FIDDLE DEMO

0
Prasanth K C