Question

我希望得到一个像这样的嵌入式地图效果：http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177，除了我需要使用iframe而不是像示例中的那样做。我的部分有一个最大宽度但地图的容器设置为溢出：可见以允许iframe显示。

我在地图div和iframe上也尝试了以下CSS：

display:block;
margin:auto;
text-align: center;

他们没有工作。请帮忙......谢谢。

我的HTML：

<div class="section">
<h2>Where we are </h2>
    <div class="map">
        <iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=3-4+High+Street+Hitchin+SG5+1BH&amp;aq=&amp;sll=51.48931,-0.08819&amp;sspn=0.868785,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&amp;t=m&amp;ll=51.947915,-0.278864&amp;spn=0.013226,0.051842&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    </div>
</div>

我的CSS：

div.section { 
 width: 80%; 
 max-width: 600px; 
 margin: 0 auto 40px;
}

div.map { 
 margin: auto; 
 width: 100%; 
 height: 25rem;
}

我还有以下脚本，根据屏幕宽度设置iframe宽度（默认为605宽度，因为iframe在HTML AFAIK中必须有一个设置宽度：

if($(window).width() < 1100) {
    $('iframe').attr("width", $(window).width());
}
else {
    $('iframe').attr("width", "1100");
}

在这里小提琴：http://jsfiddle.net/Ykx2w/

Answer 1

好的，现在我很困惑。我建议更具体，清楚地表明你想要实现的目标。根据您发布的链接，我没有看到任何地图，因此您可能正在谈论id="main-slider"（填充所有可用空间，但不是水平居中）或section id="main"（水平居中，但有静态）宽度）。你需要哪一个？

此外，我更新了我的上一个示例，以便在IE浏览器下工作并自动填充所有可用的水平空间（调整窗口大小）：http://jsfiddle.net/Ykx2w/3/。如果那不是您所需要的 - 尝试更好地描述您的需求。

Answer 2

好的，我在这里做了一些小改动：centered iframe。基本上你只需要这个CSS规则：

div.map iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

如何横向居中iframe（谷歌地图）的内容？通常的方法不起作用

2 个答案: