0

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

我必须在也是基于 % 的 div 框中垂直居中基于 % 的图像。

这是小提琴：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 框，例如页面上的那个，目前我必须复制脚本以在浏览器调整大小后正确居中。有没有办法让这更容易？

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

我不是那种编程的人，所以我希望你们能帮助我。

干杯，蒂姆

4

2 回答 2

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 时，图像还没有准备好。改用负载

于 2013-01-09T12:32:55.590 回答
0

尝试这个：

 $(window).resize(function(){
        $( ".img-swap").each(function() {
            $(this).css({
               position:'relative',
               marginTop: ($(this).parent().outerHeight() 
                - ($(this).outerHeight()+15))/2
             });
         });
});

jsfiddle
我替换marginTop而不是top因为marginTop将有助于在仅推送图像时将文本推送到图像下方top。

于 2013-01-09T12:59:20.793 回答