javascript - 如何正确居中 facebox ajax 请求？

Question

我的 wordpress 模板使用 facebox 通过 ajax 请求显示投资组合图像。

问题是图片会根据观众的屏幕尺寸加载到不同的位置。

我的模板使用

$('#facebox').css({
    top:    getPageScroll()[1] + (getPageHeight() / 10),
    left:   385.5
  }).show()

facebox网站使用

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: $(window).width() / 2 - 205
 }).show() 

facebox 网站可以完美显示图像，但是当我使用与我的模板相同的行时，显示不正确。

有人可以指出正确的方向，让图像始终加载在屏幕中央吗？

Link to the portfolio site im trying to fix

Link to the facebox site

Answer 1

公式为:(window.width/2) - (target.width/2)

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: ($(window).width() / 2) - ($('#facebox').outerWidth() / 2)
 }).show() 

请注意，您的 facebox.css 将 div#facebox 设置为 710px 宽度，尽管您的图像更宽。我使用 outerWidth() 而不是 width()，但不确定这是否正确说明了 css 710px 宽度。