GoogleマップのCSS、CENTERED要素

Question

私は自分のウェブサイトにGoogleMapsを持っています。 私の問題はCSSです.CENTERED divをGoogleマップ上に配置するにはどうすればいいですか？

<div style="position:relative"> 
    <div style="width:300px; height:300px" id="map_localization"></div> 
    <div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div> 
</div> 

これは、ほとんど私のためにどのような作品ですが、マップ

Answer 1

の上に中心層を配置する必要がありますが、いくつかのコードを明らかにすることはできますか？

私は地図とdivの両方を相対配置されたdivの中央に配置することでそれを行います。次に、地図とdivの両方を絶対的に配置します。

私は絶対位置と内部のdiv要素をセンタリングします：http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

具体的には、中央に配置するdiv要素のCSSは次のようになります。

#divToBeCentered { 
    width: 200px; 
    position: absolute; 
    left: 50%; 
    margin-left: -100px; 
} 

---

更新

は実際に、私が作ったこのフィドルは私が含むdiv要素にマップし、別のdivの両方を置くことによって何を意味するのかを示しています。

http://jsfiddle.net/2zaxd/

ここではHTMLです（あなたが持っていたものに似ています）。

<div id="containerForAll"> 
    <div id="map_localization"></div> 
    <div id="divToBeCentered">CENTERED</div> 
</div>​ 

とCSS。

#containerForAll, #map_localization, #divToBeCentered { 
border: 1px solid #000; 
} 

#containerForAll { 
position: relative; 
width: 300px; 
height: 300px; 
} 

#map_localization, #divToBeCentered { 
    position: absolute; 
} 

#map_localization { 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
} 

#divToBeCentered { 
width: 100px; 
height: 100px; 
margin-left: -50px; 
left: 50%; 
top: 50%; 
margin-top: -50px; 
} 

これは絶対配置でマップの上に内部divを配置します。