如何始终在中心对齐iframe

如何始终在中心对齐iframe

本文介绍了如何始终在中心对齐iframe的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个由div元素包围的iframe,我只是试图将它定位在中心位置。
这里是我的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;
}



小提琴:



编辑: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;
}



小提琴:



编辑:FLEX解决方案

$使用 display:flex < div>

上显示b
$ b



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

小提琴:


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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 16:00