センターGoogleマップの中心にあるヘッダーブロックの下にあるウェブページ

Googleマップを中央に配置しようとしていますが、左揃えから移動したくありません。私はそれを変更しようとするたびに、私のヘッダーを削除します。センターGoogleマップの中心にあるヘッダーブロックの下にあるウェブページ

私の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]

出典

2017-04-03 A_Worthy

は#mapCanvasのルールにposition: relativeを追加左右のオートマージンセンタリングが機能するようにします。

出典

2017-04-03 21:49:37 Johannes

didnt work。何も変わっていない –

GoogleマップはどのようにそのDIVに入りますか？もっとコードがありますか？（ある必要があります...） – Johannes

APIキーと指定されたlat＆lng –

センターGoogleマップの中心にあるヘッダーブロックの下にあるウェブページ

答えて

関連する問題