jquery垂直对齐页面加载与图像的显示设置为无？

Question

我正在使用JQuery Cycle生成图像幻灯片。该插件使用display：none来隐藏尚未显示的图像，第一个图像在页面加载时自动显示：block。我有这一点的JQuery代码垂直居中我的图像内幻灯片容器，这对于第一个图像工作....

(....inside a (document.ready(function()......) 

$('.variable').load(function() { 
var imgHt= $('.variable').height(); 
var half= imgHt/2; 
$('.variable').css("top", "50%"); 
$('.variable').css("margin-top", "-" + half + "px"); 

}）;

我试过这个代码没有.load（function（）以及它不能正常工作，浏览器将显示顶部：50％和margin-top：0px或者它将显示高度：图像的正确半高，而不是显示顶部：50％奇怪 我在这里假设JQuery没有看到图像尺寸，当它的显示设置为none。是否有解决方法？
PS这些图像是从数据库生成的，因此，我不知道图像的高度，因此我首先使用JQuery。

Answer 1

浏览器不会计算任何元素的大小，display: none。通常的解决方法是显示元素和使用边距或绝对坡以便将元素（或更可能是其容器）移动到离屏幕左侧几千像素的地方。然后箱子将被计算，你可以做你的手动定位，然后隐藏和删除边距。

但是，由于您使用的是插件，因此可能无法很好地工作。在这种情况下，我认为你最好修改插件来显示你想要的图片。它可能只用CSS，但取决于插件使用的盒子元素以及它应用于盒子和图像本身的样式（通过CSS或JS）。