Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have a div centered on screen (using width:75%;height:50%;margin: 0 auto;) When I init the map div with OL , it auto aligned to the left. How can I keep having the div in the center of the window?

share|improve this question
    
Have you tried using a child div to hold the map? –  lynxlynxlynx Mar 15 '13 at 20:38
add comment

2 Answers

Your div containing map must be positioned absolutely. If you know the required height and width of your map, it could be as follows:

  #map{
    position: absolute!important;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px!important; /*negative half of height*/
    margin-left: -200px!important; /*negative half of width*/
  }

Note the !important rule. It will override the default css properties set by OpenLayers. In case you are not sure about absolute height and width of your map div, you can use .width() and .height(). Calculate scrren width and height, and set css properties of map div from javascript.

share|improve this answer
    
thank you. what will happen when I resize the screen ? –  Alophind Mar 17 '13 at 12:23
add comment

CSS Code

.centerDiv
{
    width: 75%;
    height:5px;
    margin: 0 auto;
}

HTML Code

<div class="centerDiv">
</div>

Full source... Div on center

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.