5

我正在尝试使用 div 布局页面。我很挣扎，因为 a 的参考点<div>似乎是左上角。这没关系，直到 div 改变形状。然后，左上角的位置不合适。

如果你看到http://jsfiddle.net/jdb1991/8Xb7L/，你会得到一个活生生的例子

#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>

有没有办法使用 CSS 将正方形的“参考点”更改为中心或不同的角？

4

2 回答 2

4

你需要把point里面的square，然后给square position: relative。然后该点的位置将相对于正方形（即与正方形left左边缘的距离。）

#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>

如果要使用不同的角进行定位，请使用rightorbottom属性而不是leftor top。

如果您希望从中心定位，请按照我对正方形的建议进行操作，但要给它一个0宽度和高度。正方形现在将位于中心，并且该点相对于它定位。显然你失去了宽度和高度，所以使用百分比left和top不再起作用。

于 2013-06-19T15:44:23.350 回答
0

除了将 width 和 height 设置为0（这可能会产生一些不良后果）之外，另一种可能的解决方案是给出一个负左边距，正好等于整个盒子宽度的一半，一个负上边距正好等于整个盒子高度的一半，其中 full宽度/高度 = 宽度/高度 + 边框 + 填充。

对于小提琴中的框，其宽度/高度为 100 像素，边框为 1 像素，这意味着添加

margin-left: -51px;
margin-top: -51px;
于 2013-06-19T16:44:05.250 回答