更改CSS位置的參考點

我試圖用div來佈置頁面。我很掙扎，因爲<div>的參考點似乎是左上角。這是可以的，直到div改變形狀。然後，通過左上角的位置不合適。更改CSS位置的參考點

如果你看到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，改變廣場「基準點」是無論是市中心或不同角？

來源

2013-06-19 jdborg

你說的「基準點」是什麼意思？ –

如果你想把加號放在方框內，那麼將該div設爲另一個的孩子。 – j08691

我不是想把這個觀點放在盒子裏，抱歉讓我感到困惑。這只是爲了顯示屏幕的中心以及正方形的左上角是對齊的事實。 – jdborg

您需要將point放入square之內，然後再輸入squareposition: 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>

如果你想使用不同的角落定位，請使用right或bottom屬性代替left或top。

如果你想從中心位置，做我建議與廣場，但給它一個0寬度和高度。廣場現在位於中心位置，並且相對於該位置定位。顯然你失去了寬度和高度，所以使用left和top的百分比將不再有效。

來源

2013-06-19 15:44:23

我並不是想把這個問題放在箱子裏，抱歉讓我感到困惑。這只是爲了顯示屏幕的中心以及正方形的左上角是對齊的事實。 – jdborg

請參閱附加評論。 –

+1感謝您的更新，這給了我一些工作。對可憐的措辭開始抱歉。 – jdborg

除了將寬度和高度設置爲0（這可能會帶來一些不良後果），另一種可能的解決方案是給出等於完整框寬度的一半的負左邊距，以及等於滿的一半盒子高度，其中full width/height = width/height + border + padding。

對於您的提琴箱，其中有100個像素和1個像素的邊框寬度/高度，這將意味着增加

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

來源

2013-06-19 16:44:05 Artyom

更改CSS位置的參考點

回答

相關問題