Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set DIV position to 200 pixels to left of the center

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;
}

What I want to achieve:

Illustrating a div that is positioned 200px to the left of the center of the page

like image 214
Haluk ÜNAL Avatar asked Jun 20 '12 19:06

Haluk ÜNAL


People also ask

How do I fix the position of an image and div?

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).

How do you center a position fixed?

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.

How do you center a div in the middle of the screen?

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.


1 Answers

Simply position it 50% from the right (right:50%;), and then push it over using margin-right:200px; (example).

HTML

<div class="hsonuc">DIV</div>

CSS

.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 */
}
like image 136
0b10011 Avatar answered Nov 01 '22 15:11

0b10011