Question

嗨我不是很熟悉CSS，但我需要谷歌地图以我的页面为中心，我当前的代码不按我想要的方式工作。：S

这是我的HTML

<div class="maps">
<iframe src="https://www.google.com/maps/d/embed?mid=zZVPDX7DZETc.kFjAmXvee3Zc" width="512" height="384"></iframe>
</div>

这是我的css

.maps {
position: absolute;
    top: 50%;
    left: 35%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

我在做错了什么？我也试过margin-right / left：auto;那没用。

Answer 1

通常有两种方法可以使元素居中，如果它是display:block，那么只要它具有margin-right:auto;margin-left:auto;集，您就可以width。如果是display:inline，那么您可以在其父

上使用text-align:center

Answer 2

使用以下

.maps {
    width: 512px;
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/hcwy81oj/

Answer 3

您也不需要添加div。你可以在里面给它上课。

<iframe src="https://www.google.com/maps/d/embed?mid=zZVPDX7DZETc.kFjAmXvee3Zc" width="512" height="384" class="map"></iframe>

如果这可以帮助任何人......

Answer 4

如果iframe位于具有固定宽度的元素内，则在iframe嵌入代码上使用google默认值：

<div style="margin:0 auto;">

<iframe src="https://www.google.com/maps/embed?pb=YourMap" width="600" height="450" frameborder="0" style="border:0; margin:0 auto;" allowfullscreen></iframe>

</div>

以谷歌地图iframe为中心

4 个答案: