css 如何使iframe始终居中对齐

mpbci0fu 于 2023-03-05 发布在其他

关注(0)|答案(8)|浏览(229)

我有一个被div元素包围的iframe，我只是想把它放在中间。下面是我的jsfidle成果：* * 一个
我真的相信有人能帮上忙，因为我确信这是一件很简单的事情，但我就是看不出来。
下面是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>

css

来源：https://stackoverflow.com/questions/20583088/how-to-align-iframe-always-in-the-center

8条答案

按热度按时间

arknldoa1#

居中iframe

- 编辑**：FLEX解决方案

在<div>上使用display: flex

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

JSF中间文件：https://jsfiddle.net/h9gTm/867/
一种解决方案是：
x一个一个一个一个x一个一个二个x
JSF中间文件：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;
}

JSF中间文件：https://jsfiddle.net/h9gTm/1/

赞(0）回复(0）举报 2023-03-05

d8tt03nd2#

试试这个：

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}

赞(0）回复(0）举报 2023-03-05

kuuvgm7e3#

我觉得如果加上保证金：auto;到下面的div，它应该工作。

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

赞(0）回复(0）举报 2023-03-05

ct3nt3jp4#

如果您只想在页面上显示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>

如果这就是你所需要的，那么你就不需要 Package 器div来做这件事了，这也适用于文本内容和其他东西。
Fiddle.
而且this看起来更简单。

赞(0）回复(0）举报 2023-03-05

41zrol4v5#

您可以轻松地使用display：table来垂直对齐内容，使用text-align：center来水平对齐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）回复(0）举报 2023-03-05

6psbrbz96#

首先删除div#iframe-wrapper iframe中的position:absolute，从div#iframe-wrapper中删除position:fixed和**所有其他css

然后应用此css，

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

**一个

赞(0）回复(0）举报 2023-03-05

gpnt7bae7#

您可以使用CSS并添加一个容器和一个样式使其居中

<style>
.container { 
  height: 75px;
  position: relative;
  border: none;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

粘贴后，添加一个div到iFrame，然后它应该看起来像这样

<div class="container">
  <div class="center">
    <iframe src="embbeded form link here" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  </div>
</div>

赞(0）回复(0）举报 2023-03-05

omjgkv6w8#

非常简单的HTML方式：无css无脚本

<center>
<iframe> your content </iframe>
</center>

示例2框架中心和框架中的文本左或右e.c.t

<center>
<iframe align="left|right|middle|top|bottom"> your frame content </iframe>
</center>

要查看所有iframe参数，可以使用iframe生成器https://superblogger3.blogspot.com/2023/03/iframe-generator.html

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何使iframe始终居中对齐

8条答案

居中iframe

css：

相关问题

热门标签

最新问答