Change breakpoint for CSS position

Question

I am trying to lay out a page using a div. I'm afraid because the starting point in the <div> seems to be top left. This is fine until the div changes shape. Then the position in the upper left corner does not fit.

If you see http://jsfiddle.net/jdb1991/8Xb7L/ you will get a live example

 #point { position: absolute; top: 50%; left: 50%; } #square { border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; } <div id="point">+</div> <div id="square"></div> 

Is there a way, using CSS, to change the “anchor point” of the square to both the center and the other corner?

Answer 1

You need to put a point inside square , and then give square position: relative . The position of the point will then be relative to the square (i.e. left will be the distance from the left edge of the square.)

 #point { position: absolute; top: 50%; left: 50%; } #square { position: relative; border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; } 

---

 <div id="square"> <div id="point">+</div> </div> 

---

If you want to use a different angle for positioning, use the right or bottom properties instead of left or top .

If you want to position from the center, do what I suggested with the square, but give it a width and height of 0 . Now the square will be in the center and the point will be located relative to it. Obviously, you are losing width and height, so using percentages for left and top will no longer work.

Answer 2

Besides setting the width and height to 0 , which can have some undesirable consequences, another possible solution would be to give a negative left margin equal to exactly half the full width of the field, and a negative upper margin equal to half the full height of the box, where full width / height = width / height + border + addition.

For a field in your violin whose width or height is 100 pixels and a border of 1 pixel, this means adding

 margin-left: -51px; margin-top: -51px;