2015-04-30 19 views
0

到目前爲止文本居中谷歌地圖頁面擁抱左側,然後下面的文本仍然居中,我只是想要地圖居中。如何將我的谷歌地圖腳本中心與div?

<div id="row1"> 
    <div id="note"><img src="http://www.bristol.gov.uk/sites/default/files/styles/hero_image/public/images/children_and_young_people/resources_for_professionals/head_teachers_and_school_administrators/hr/contact_us/we%20will%20be%20back%20soon-sticky%20note.jpg?itok=08vLR_lO"></div> 
    <div id = "hours"> 
     Sorry<br> 
     hours<br> 
    </div> 
    <div id="gmap_canvas" style="height:500px; width:600px;"></div> 
    Below text 
</div>  

風格:

#row1 { 
    text-align: center; 
} 

谷歌地圖的JavaScript:

<script type="text/javascript"> 
function init_map() { 
    var myOptions = { 
     zoom: 16, 
     center: new google.maps.LatLng(20.0820037, -14.26733380000002), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 
    marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(20.0820037, -14.26733380000002) 
    }); 
    infowindow = new google.maps.InfoWindow({ 
     content: "<b>Crokson Dine In</b><br/>43 Gill Rd<br/>09521 Hovill" 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
    }); 
    infowindow.open(map, marker); 
} 
google.maps.event.addDomListener(window, 'load', init_map); 
</script> 
+1

'#gmap_canvas {margin:0 auto;}'可以做到這一點。 –

回答

2

text-align: center不能居中塊元素本身。您需要自動頁邊距:

<div 
    id="gmap_canvas" 
    style="height:500px; width:600px; margin-left: auto; margin-right: auto;">