I want to position a DIV
200 pixels to left of the center.
I am currently using the following code, but on higher resolution displays (e.g. 1920×1080), the DIV
was slipping out of position:
.hsonuc {
position: absolute;
top: 20px;
margin:auto;
margin-left:200px;
display:none;
}
The easiest thing to do is put them inside the map div, give #map { position: relative; } and then give the pins position: absolute; with top and left properties (probably what you're already doing).
You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.
You can do this by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Simply position it 50%
from the right (right:50%;
), and then push it over using margin-right:200px;
(example).
<div class="hsonuc">DIV</div>
.hsonuc {
position:absolute;
top:20px;
right:50%; /* Positions 50% from right (right edge will be at center) */
margin-right:200px; /* Positions 200px to the left of center */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With