I am displaying a scale in a DIV:

enter image description here

I would like to display the scale in the center of that DIV.

There does not seem to be an option for that so I am trying to use CSS.

The following, however, does not work (using margin with a specific amout of pixels does work):

.ol-scale-line {
    margin-left: auto !important;
    margin-right: auto !important;

How would I go about centering that scalebar?

.ol-scale-line {
  left: 50%;
  transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0)

Based on https://www.w3.org/Style/Examples/007/center.en.html#vertical3

Transform for Internet Explorer: https://msdn.microsoft.com/en-gb/library/jj127312(v=vs.85).aspx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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