使用JavaScript在距窗口中心特定距離處放置一個div

我正努力在窗口的虛中心位置放置一個100px的div。使用JavaScript在距窗口中心特定距離處放置一個div

我的代碼是這樣做的：中間的窗口/ 2 + 100像素，是不是我想要的：

var middle = screen.availWidth/2; 
var position = middle+300; 
document.getElementById('bookmarks').style.left = position + 'px';

使用此代碼我的DIV會左，右根據窗口的大小，我想它是在距離中心100像素沒有移動。

另外我知道這是取決於瀏覽器。

對此有何幫助？

謝謝！ Vic

來源

2011-04-08 Snowalker

請記住在計算中考慮div的寬度。 – Nick 2011-04-08 17:00:01

所以你想在窗口調整大小時保持居中？ – bcoughlan 2011-04-08 17:07:18

你說中間，但你不說在哪個軸上，所以假設你想要x和y的中間，你可以使用下面的代碼。注意：它是div的200px寬度和高度的因子。

<body> 
<div style="background-color: #000000; height: 200px; width: 200px; position: fixed;" id="bookmarks"></div> 


<script> 
var middleX = window.innerWidth/2; 
var middleY = window.innerHeight/2; 
var positionX = middleX-100; 
var positionY = middleY-100; 
document.getElementById('bookmarks').style.left = positionX + 'px'; 
document.getElementById('bookmarks').style.top = positionY + 'px'; 

</script> 
</body>

另請注意，這樣做有更清潔的方法。我這樣離開它，這樣你就可以理解邏輯，然後自己清理它，並且你還說你根本不想它移動，所以我認爲你想要的位置：固定的。

來源

2011-04-08 17:05:26

使用JavaScript在距窗口中心特定距離處放置一個div

回答

相關問題