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

Question

我正在使用JQuery Cycle来制作图像的幻灯片。该插件使用display：none来隐藏尚未显示的图像，第一个图像自动显示：页面加载时阻止。我有一些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（）的情况下尝试了这个代码，并且它无法正常工作。浏览器将显示top：50％和margin-top：0px或者它将显示高度：正确的图像半高，并且不显示顶部：50％。很奇怪。 我假设JQuery在显示设置为none时没有看到图像尺寸。有解决方法吗？
附：这些图像是从数据库生成的，所以不，我事先并不知道图像的高度。这就是我首先使用JQuery的原因。

Answer 1

浏览器不会使用display: none计算任何元素的大小。通常的解决方法是显示元素并使用边距或绝对定位将元素（或更可能是其容器）移动到屏幕左侧数千个像素的某个位置。然后计算方框，你可以进行手动定位，然后隐藏和删除边距。

但是，由于您使用的是插件，因此可能效果不佳。在这种情况下，我认为你最好修改插件以显示你想要的图像。它可能只有CSS，但这取决于插件使用的框元素和它在框和图像本身上应用的样式（通过CSS或JS）。