如何让 iframe 始终居中对齐

新手上路,请多包涵

我有一个被 div 元素包围的 iframe,我只是想将它始终定位在中心。这是我的 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>

原文由 mathinvalidnik 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 589
1 个回答

中心 iframe

编辑:FLEX 解决方案

使用 display: flex<div>

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

JSFiddle: https ://jsfiddle.net/h9gTm/867/

一种解决方案是:

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

JSFiddle: https://jsfiddle.net/h9gTm/

编辑:添加了垂直对齐

CSS:

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

JSFiddle: https ://jsfiddle.net/h9gTm/1/

原文由 Facundo Colombier 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏