Question

我目前正在为我的新网络投资组合编程。到现在为止还挺好。我决定完全以％为基础，我最后一个细节：

我必须在一个div框中垂直居中基于％的图像，这也是基于％的。

这段代码并不像我希望的那样工作：

$(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

我不是那个编程人员，所以我希望你们可以帮助我。

干杯，添

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时图像尚未就绪。改为使用加载

Answer 2

试试这个：

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

jsfiddle
我替换marginTop而不是top因为marginTop将有助于推送图片正下方的文字而top仅推送图片。

垂直居中与基于百分比的图像的div

2 个答案: