Question

我无法将我的Google地图iframe置于页面的中心位置。我希望iframe也能响应。如何使其响应和集中？以下是我的代码。

CSS：

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

HTML：

<div class="video-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

Answer 1

在你的div上使用NOW()。 https://jsfiddle.net/w0et2jz1/

Answer 2

尝试以下风格：

.video-container {
  margin: 0 auto;
  width: 560px !important;
}

希望，它可以帮助您使用桌面

Answer 3

这是我的解决方案。请看看，如果它仍然不是您想要的方式让我知道。感谢。

CSS：

.video-container { 
 max-width: 70%;
 height: auto;
 border: 1px solid black;
 margin: auto;
 }

 iframe {
 width: 100%;
 height: 50%;
 }

Answer 4

对于您的情况，如果您需要在桌面上固定宽度和高度，但随后响应，您将需要添加一个包装div并设置以下css。

＆＃13;

.container {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="video-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002"
    frameborder="0" width="560" height="315" allowfullscreen></iframe>
  </div>
</div>

＆＃13;

这将使台式机上的iframe宽560px，高度达到315px，但随后在移动设备上可以很好地缩小。

这里是JSFiddle

将桌面和移动设备的iframe居中

4 个答案: