如何始终在中心对齐iframe [英] How to align iframe always in the center

问题描述

我有一个由div元素包围的iframe，我只是试图将它定位在中心位置。
这里是我的jsfiddle努力： jsfiddle

并且相信有人可以提供帮助，因为我确信它确实很简单，但我看不到它。

以下是HTML本身：

 < div id =top-element>宽度大于内部div的一些div< / div> 
< div id =iframe-wrapper> 
< iframe src =http://www.apple.com/scrolling =auto>< / iframe> 
< / div> 
  

解决方案

center iframe

一个解决方案是：

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

css：

  div {
 text-align：center; 
宽度：100％; 
} 
 iframe {
 width：200px; 
} 
  

小提琴： http://jsfiddle.net/h9gTm/

编辑：vertical align added

css：

  div {
 text-align：中央; 
宽度：100％; 
 vertical-align：middle; 
身高：100％; 
 display：table-cell; 
} 
 .iframe {
 width：200px; 
} 
 div，
 body，
 html {
 height：100％; 
宽度：100％; 
} 
 body {
 display：table; 
} 
  

小提琴： http://jsfiddle.net/h9gTm/1/

编辑：FLEX解决方案

$使用 display：flex 在< div>

上显示b
$ b

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

小提琴： http://jsfiddle.net/h9gTm/867/

I have an iframe surrounded by div element and I am simply trying to position it always in the center. here is my jsfiddle effort : jsfiddle

and trully believe that someone could help because I am sure that it is something really simple but I just can not see it.

Here is the HTML itself:

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

解决方案

center iframe

one solution is:

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

css:

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

fiddle: http://jsfiddle.net/h9gTm/

edit: vertical align added

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

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

Edit: FLEX solution

using display: flex on the <div>

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

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

这篇关于如何始终在中心对齐iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！