Javascript 将子类与父类垂直对齐

我正在开发一个网页，用户可以通过悬停来显示更大的图像或预览每个缩略图

我使用Jquery代码在屏幕上显示并居中显示较大的图像

var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");

      $(self).children('.popup-preview').css("position", "fixed");
      $(self).children('.popup-preview').css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2));
      $(self).children('.popup-preview').css("left", ($(window).width() / 2) - ($(self).children('.popup-preview').outerWidth() / 2));

    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);

如何将较大的图像与父类垂直对齐

更新：例如，缩略图位于屏幕顶部或底部并悬停。较大的图像应垂直显示在屏幕中央

var定时器；
$（“.theme预览”）.hover（函数（）{
var self=$（这是）；
计时器=设置超时（函数（）{
定时器=假；
$（self）.children（'.popup preview'）.fadeIn（“慢”）；
}, 800);
//返回false；
},
函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=假；
}否则{
$（此）.children（'.popup preview'）.fadeOut（“fast”）；
}
//返回false；
}
);
。弹出式预览{
背景：黑色；
位置：绝对位置；
z指数：1；
排名：0；
显示：无；
}
.col-md-6{
浮动：左；
}
.主题预览{
位置：相对位置；
}

主题1-1
主题1-1
主题1-1
主题1-1

var定时器；
$（“.theme预览”）.hover（函数（）{
var self=$（这是）；
计时器=设置超时（函数（）{
定时器=假；
$（self）.children（'.popup preview'）.fadeIn（“慢”）；
}, 800);
//返回false；
},
函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=假；
}否则{
$（此）.children（'.popup preview'）.fadeOut（“fast”）；
}
//返回false；
}
);
。弹出式预览{
背景：黑色；
位置：绝对位置；
z指数：1；
排名：0；
显示：无；
}
.col-md-6{
浮动：左；
}
.主题预览{
位置：相对位置；
}

主题1-1
主题1-1
主题1-1
主题1-1
只需尝试将位置更改为绝对位置即可

        var timer;
        $(".theme-preview").hover(function() {
                var self = $(this);

                timer = setTimeout(function(){
                    timer = false;

                    $(self).children('.popup-preview').fadeIn("slow");

                    $(self).children('.popup-preview').css("position","absolute");
                    $(self).children('.popup-preview').css("top", '0');
                    $(self).children('.popup-preview').css("left", 'auto');

                }, 800);

                //return false;
            }, 
            function () {
                if(timer){
                    clearTimeout(timer);
                    timer = false;
                }else{          
                        $(this).children('.popup-preview').fadeOut("fast");
                }

                //return false;
            }
        );

试着将位置更改为绝对位置

        var timer;
        $(".theme-preview").hover(function() {
                var self = $(this);

                timer = setTimeout(function(){
                    timer = false;

                    $(self).children('.popup-preview').fadeIn("slow");

                    $(self).children('.popup-preview').css("position","absolute");
                    $(self).children('.popup-preview').css("top", '0');
                    $(self).children('.popup-preview').css("left", 'auto');

                }, 800);

                //return false;
            }, 
            function () {
                if(timer){
                    clearTimeout(timer);
                    timer = false;
                }else{          
                        $(this).children('.popup-preview').fadeOut("fast");
                }

                //return false;
            }
        );

JU使您的.popup预览成为“绝对”
左：0；最高：50%；并添加转换：translateY（-50%）


var定时器；
$（“.theme预览”）.hover（函数（）{
var self=$（这是）；
计时器=设置超时（函数（）{
定时器=假；
$（self）.children（'.popup preview'）.fadeIn（“慢”）；
$（self）.children（'.popup preview'）.css（“位置”，“绝对”）；
$（self）.children（'.popup preview'）.css（“左”，“0”）；
$（self）.children（'.popup preview'）.css（“top”，“50%”）；
}, 800);
//返回false；
}, 
函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=假；
}否则{
$（此）.children（'.popup preview'）.fadeOut（“fast”）；
}
//返回false；
}
);
。弹出式预览{
背景：黑色；
位置：绝对位置；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-o-变换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
z指数：1；
显示：无；
}
.col-md-6{
浮动：左；
边缘顶部：50px；
}
.主题预览{
位置：相对位置；
}

主题1-1
主题1-1
主题1-1
主题1-1
Jus使您的.popup预览成为“绝对”
左：0；最高：50%；并添加转换：translateY（-50%）


var定时器；
$（“.theme预览”）.hover（函数（）{
var self=$（这是）；
计时器=设置超时（函数（）{
定时器=假；
$（self）.children（'.popup preview'）.fadeIn（“慢”）；
$（self）.children（'.popup preview'）.css（“位置”，“绝对”）；
$（self）.children（'.popup preview'）.css（“左”，“0”）；
$（self）.children（'.popup preview'）.css（“top”，“50%”）；
}, 800);
//返回false；
}, 
函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=假；
}否则{
$（此）.children（'.popup preview'）.fadeOut（“fast”）；
}
//返回false；
}
);
。弹出式预览{
背景：黑色；
位置：绝对位置；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-o-变换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
z指数：1；
显示：无；
}
.col-md-6{
浮动：左；
边缘顶部：50px；
}
.主题预览{
位置：相对位置；
}

主题1-1
主题1-1
主题1-1
主题1-1

如何将较大的图像与父类垂直对齐

使用
getBoundingClientRect（）
函数获取主题预览的当前边界，然后计算相应的左侧和顶部

var currentRect = self[0].getBoundingClientRect();

...

var previewPopup = self.children('.popup-preview');
      previewPopup.fadeIn("slow");

      previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top - 20)
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));



更新。这应该根据父级宽度和高度使其居中。

如何对齐较大的图像