在网页中心 header 块下的中心 Google 地图
Center Google map under header block in center on webpage
我试图将我的 google 地图居中,但它不想从左对齐状态移动。每当我尝试更改它时,它都会删除我的 header.
我的css代码
#mapCanvas {
width: 960px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
header {
width: 960px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: #339966;
font-family: Garamond;
font-weight: bold;
font-style: italic;
}
h1{
color: white;
font-family: Garamond;
font-weight: normal;
font-style: italic;
text-align: center;
font-size: 40px
}
p {
color: white;
font-family: Garamond;
font-weight: normal;
font-style: italic;
text-align: center;
font-size: 20px;
}
我的代码在我的 html
<body>
<header>
<h1>
Find a user's location using HTML5 Geolocation
</h1>
<p> If Geolocation sercive is failed, the University of Maryland Campus will be displayed on a map</p>
</header>
<div id="mapCanvas">
</div>
</body>
[1]: https://i.stack.imgur.com/6WZiy.jpg [我目前的成绩][1]
将 position: relative
添加到 #mapCanvas
的规则中,以便 left/right 自动页边距居中。
我试图将我的 google 地图居中,但它不想从左对齐状态移动。每当我尝试更改它时,它都会删除我的 header.
我的css代码
#mapCanvas {
width: 960px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
header {
width: 960px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: #339966;
font-family: Garamond;
font-weight: bold;
font-style: italic;
}
h1{
color: white;
font-family: Garamond;
font-weight: normal;
font-style: italic;
text-align: center;
font-size: 40px
}
p {
color: white;
font-family: Garamond;
font-weight: normal;
font-style: italic;
text-align: center;
font-size: 20px;
}
我的代码在我的 html
<body>
<header>
<h1>
Find a user's location using HTML5 Geolocation
</h1>
<p> If Geolocation sercive is failed, the University of Maryland Campus will be displayed on a map</p>
</header>
<div id="mapCanvas">
</div>
</body>
[1]: https://i.stack.imgur.com/6WZiy.jpg [我目前的成绩][1]
将 position: relative
添加到 #mapCanvas
的规则中,以便 left/right 自动页边距居中。