Question

我尝试使用div来居中iframe，但是没有用。我已经完成了大约20个不同的帖子，但没有一个有效。

以下是代码：

＆＃13;

center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<center>
  <iframe src="gallery.html" width="100%" style="height:100vh";></iframe>
</center>

＆＃13;

我错过了什么吗？

Answer 1

我想这个解决方案就是你想要的。

缩小iframe的大小，将width和text-align设置为容器元素。

.centered {
  width: 100%;
  text-align: center;
}

<div class="centered">
  <iframe src="gallery.html" width="80%" style="height:100vh";></iframe>
</div>

Answer 2

我猜你应该尝试使用flexbox集中你的iframe。

.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

<div class="flex-wrap">
    <div>
        <iframe src="https://www.google.com" width="120" style="height:100vh";></iframe>
    </div>
<div>

Answer 3

中心标记已经是居中位置，您无需输入CSS。

只需尝试一下，它可能对您有帮助。

<center><iframe src="https://www.google.com" width="120" style="height:100vh";></iframe></center>

我的iframe根本不会居中

3 个答案: