Question

我创建了一个可以滑动图像的脚本。每个图像都包含在“幻灯片”div中。我想要做的是使用jquery垂直对齐每个单独的图像。目前我正在使用：

$('.slide img').each(function() {
    var image_height = $(this).height();
    var height_margin = (image_height/2)*-1;
    $('.slide img').css('margin-top', height_margin);
    $('.slide img').css('top', 50%);    
    $('.slide img').css('height', image_height);    

});

我注意到它将第一张图像的第一个高度和边距应用于所有<div class"slide"></div>标签。另外：<div class"slide"></div>的常量高度为600px。

并非每张图片都是一样的，我希望它是动态的......有什么想法吗？

Answer 1

如果.slide容器的高度恒定，您可以在CSS中将display:block和margin:auto 0;应用于.slide img以达到相同的效果......无需进行JS计算。

Answer 2

您不应在$('.slide img')循环中使用.each，因为此选择器将更改所有样式。目前，您正在将最后一张图像的设置应用于所有图像。代码中的另一个错误：您忘记引用50%。

$('.slide img').each(function() {
    var $this = $(this);
    var image_height = $this.height();
    var height_margin = (image_height/2)*-1;
    $this.css('margin-top', height_margin);
    $this.css('top', '50%');    
    $this.css('height', image_height);    
});

您的代码可以进一步优化：

$('.slide img').each(function() {
    var $this = $(this);
    var image_height = $this.height();
    var height_margin = -image_height / 2
    $this.css({'margin-top', height_margin,
               'top', '50%',  
               'height', image_height
              });    
});

Answer 3

好的我有一个解决方案，首先让包含DIV的line-height与您最高的图像的高度相匹配，然后在适用于所有图像的类中使用vertical-align:middle，确保图像已设置到display:inline虽然或它不会工作。

div.container {line-height:300px;} /*or whatever that may be, then*/
img.slides {vertical-align:middle;}

如何使用jQuery垂直对齐不同高度的多个图像？

3 个答案: