jquery - 使用基于百分比的图像垂直居中 div

Question

我目前正在编写我的新网络作品集。到目前为止，一切都很好。我决定让它完全基于 %，我正在为最后一个细节而苦苦挣扎:

我必须在同样基于 % 的 div 框中将基于 % 的图像垂直居中。

这是 fiddle :http://jsfiddle.net/PX4tF/4/

这段代码并没有像我希望的那样工作:

$(document).ready(function(){

         $(window).resize(function(){

          $('.vertical_center').css({
           position:'relative',
           left: ($(window).width() 
             - $('.vertical_center').outerWidth())/2,
           top: ($(window).height() 
             - $('.vertical_center').outerHeight())/2
          });

         });

         // To initially run the function:
         $(window).resize();

        });

我目前使用的脚本只有在我调整窗口大小时才能正常工作。在此之前，它有点使图像居中但不正确。我也有多个 div 框，就像我页面上的 fiddle 一样，目前我必须复制脚本以在浏览器调整后正确居中。有没有办法让它更容易？

这是测试版网站的链接:http://www.zeiteffekt.de/relaunch

我不是那种编程人员，所以我希望你们能帮我解决这个问题。

干杯， 蒂姆

Answer 1

试试这样的

function alignImage()
{
    $('.vertical_center').css({
        position:'relative',
        left: ($(window).width() - $('.vertical_center').outerWidth())/2,
        top: ($(window).height() - $('.vertical_center').outerHeight())/2
    });
}
$(window).load(function() {
    alignImage();
});
$(window).resize(function() {
    alignImage();
});

调用 $(document).ready 时图像还没有准备好。改为使用负载