Google maps 如何在页面上居中放置嵌入式谷歌地图？_Google Maps_Center

Google maps 如何在页面上居中放置嵌入式谷歌地图？

google-maps

Google maps 如何在页面上居中放置嵌入式谷歌地图？,google-maps,center,Google Maps,Center,我知道这是一个相当简单的过程，但每次我试图完成这个页面的设计时，我都会搜索答案，而我在这里和谷歌上找到的解决方案都没有一个能帮到我我也明白，强迫一个元素以中心为中心并不完全理想，特别是当这些天有这么多不同的设备访问互联网时，但我只想完成这项工作，以便我可以专注于其他问题代码如下： <!DOCTYPE html> <html> <head> <title>Como chegar</title> <style>

我知道这是一个相当简单的过程，但每次我试图完成这个页面的设计时，我都会搜索答案，而我在这里和谷歌上找到的解决方案都没有一个能帮到我

我也明白，强迫一个元素以中心为中心并不完全理想，特别是当这些天有这么多不同的设备访问互联网时，但我只想完成这项工作，以便我可以专注于其他问题

代码如下：

    <!DOCTYPE html>

<html>

<head>

<title>Como chegar</title>

<style>

#container {

    width: 800px;
    height: 600px;
    margin: 100px auto;

}

#content {

    width: 800px;
    height: 500px;
    background-color: white;

}

.strips {

    width: 800px;
    height: 50px;
    background-image: url(spritepimentarosa.png);
    background-repeat: no-repeat;
    float: left;

}

.navBar {

    width: 250px;
    height: 50px;
    background-image: url(spritepimentarosa.png);
    background-repeat: no-repeat;
    float: left;

}

.nb1 {

    background-position: 0px -450px;
    margin-left: 25px;

}

.nb2 {

    background-position: -250px -450px;

}

.nb3 {

    background-position: -500px -500px;
    margin-right: 25px;

}

.nb1:hover {

    background-position: 0px -500px;
    margin-left: 25px;

}

.nb2:hover {

    background-position: -250px -500px;

}

.nb3:hover {

    background-position: -500px -450px;
    margin-right: 25px;

}

.logo {

    background-position: 0px -200px;

}

.footer {

    background-position: 0px -400px;

}

</style>

</head>

<body bgcolor="#D63B77">

    <div id="container"><!-- beginning of container -->

    <div class="navBar nb1"></div>
    <div class="navBar nb2"></div>
    <div class="navBar nb3"></div>

    <div id="content"><!-- beginning of content -->


        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;aq=0&amp;oq=980,+avenida+sao+camilo&amp;sll=-23.583184,-46.836844&amp;sspn=92.879748,186.152344&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;ll=-23.583025,-46.83712&amp;spn=0.037758,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.ie/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;aq=0&amp;oq=980,+avenida+sao+camilo&amp;sll=-23.583184,-46.836844&amp;sspn=92.879748,186.152344&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;ll=-23.583025,-46.83712&amp;spn=0.037758,0.054932&amp;z=14&amp;iwloc=A" style="color:#D63B77;text-align:center;font-size:180%">Ver mapa ampliado</a></small>


    </div><!-- end of content -->

    <div class="strips logo"></div>

    <div class="strips footer"></div>

    </div><!-- end of container -->

</body>

</html>


科莫·切加
#容器{
宽度：800px；
高度：600px；
保证金：100像素自动；
}
#内容{
宽度：800px；
高度：500px；
背景色：白色；
}
.条纹{
宽度：800px；
高度：50px；
背景图片：url（spritepimentarosa.png）；
背景重复：无重复；
浮动：左；
}
navBar先生{
宽度：250px；
高度：50px；
背景图片：url（spritepimentarosa.png）；
背景重复：无重复；
浮动：左；
}
.nb1{
背景位置：0px-450px；
左边距：25px；
}
.nb2{
背景位置：-250px-450px；
}
.nb3{
背景位置：-500px-500px；
右边距：25px；
}
.nb1：悬停{
背景位置：0px-500px；
左边距：25px；
}
.nb2：悬停{
背景位置：-250px-500px；
}
.nb3：悬停{
背景位置：-500px-450px；
右边距：25px；
}
.标志{
背景位置：0px-200px；
}
.页脚{
背景位置：0px-400px；
}

如果有人能帮我，我将不胜感激

谢谢。

您可以在div上使用

  margin-left: auto ;
  margin-right: auto ;

你可以在你的div上使用

  margin-left: auto ;
  margin-right: auto ;

通常，您只需添加：

#content {
  text-align: center;
}

另一个技巧是设置div的宽度，然后自动设置div的边距：

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

通常，您只需添加：

#content {
  text-align: center;
}

另一个技巧是设置div的宽度，然后自动设置div的边距：

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

是否要将中心设置为：

页面
页面内容
谷歌地图（iframe）

页为了使页面居中，您必须使用一个包装器，一个用#content id围绕div的div

.wrapper or #wrapper (depends if you want to use ID or Class)
{
  margin: 0 auto;
}

页面内容只需将边距应用于#上下文即可

#contet
{
  margin: 0 auto;
}

边缘只需通过CSS将边距应用于iframe标记

iframe
{
  margin: 0 auto;
}

**注意**请记住，元素需要为其指定宽度，才能正常工作。不能使用宽度：100%；希望它能起作用，但我想你已经知道这一点。

你想集中精力：

页面
页面内容
谷歌地图（iframe）

页为了使页面居中，您必须使用一个包装器，一个用#content id围绕div的div

.wrapper or #wrapper (depends if you want to use ID or Class)
{
  margin: 0 auto;
}

页面内容只需将边距应用于#上下文即可

#contet
{
  margin: 0 auto;
}

边缘只需通过CSS将边距应用于iframe标记

iframe
{
  margin: 0 auto;
}

**注意**请记住，元素需要为其指定宽度，才能正常工作。不能使用宽度：100%；希望它能起作用，但我想你已经知道了。

非常感谢你，帕尔姆。第一种技术完美无瑕，第二种却没有。非常感谢你，帕尔姆。第一种技术完美无瑕，第二种则不然。