2

This is more like a CSS question than a GIS one. But I don't have any clue how to center an element that has an absolute position.


Here's some relevant markup for my icon category selector that I create using ol.control.defaults().extend( new myCustomControlFunction() ); (it's used within a Wordpress plugin that I'm writing and the category buttons are created dynamically based upon the Wordpress categories):

`<div class="ol-taxonomy-selector ol-unselectable ol-control">
    <span class="selectbuttons">
        <button class="category-name" name="catid" onclick="iconSelectCat(this)">Category Name</button>
        <!-- one button for each category here -->
    </span>
    <button class="mobiletoggle"></button>
</div>`

I want to center the horizontal category select bar at the bottom of the map. In ol.css, ".ol-button" is set to position:absolute so that I can position it left, right, top, bottom. But how do I center an element that has position:absolute and a variable width?

It's more a general CSS question but with the code you can see where I want to apply it.

closed as off-topic by PolyGeo May 4 '17 at 21:34

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Welcome to GIS.SE. Perhaps you could show some relevant code/CSS markup? – John Powell May 28 '15 at 6:40
  • Thanks for welcoming me! I added the HTML markup above and explained the CSS a bit. I think it's a clear CSS question, but as other Openlayers 3 users might wish to center control buttons, I thought it might be useful to discuss it here. – winnewoerp May 29 '15 at 8:00
  • How about a feedback? – Jonatas Walker Nov 13 '15 at 14:05
1

To give you some inspiration, for instance, if you want the zoom control positioned at the center bottom of the map you can use:

.ol-control.ol-zoom{

    top: -moz-calc(100% - 65px);
    top: -webkit-calc(100% - 65px);
    top: calc(100% - 65px);
    left: -moz-calc(50% - 33px);
    left: -webkit-calc(50% - 33px);
    left: calc(50% - 33px);

}

where 65px is the computed height of the control and 33px the width. The vendor prefix (-moz-calc, -webkit-calc) is to give more browser compatibility.

And this CSS declaration .ol-control.ol-zoom means:

apply only when these two are in the same HTML element, e.g.:

<div class="ol-zoom ol-control">

UPDATE

You can also appeal to another CSS resource:

left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

Here's a demo.

  • Thank you, this is a good idea. I never used CSS3 calc for positioning and I will give it at try. However, this does not work for element that have a variable width, right? I have horizontal category select buttons for my icons at the bottom of my map and they include the category name which has a variable length. – winnewoerp May 30 '15 at 10:53
  • I've updated my answer. – Jonatas Walker May 30 '15 at 17:56

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