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

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);    

});

我注意到它将第一张图像的第一个高度和边距应用于所有

标签。另外：

的高度恒定为 600px。

并非每张图像都是相同的，我希望它是动态的......有什么想法吗？

Answer 1

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

如果 .slide 容器具有恒定的高度，您可以将 display:block 和 margin:auto 0; 应用于 .slide img< /code> 在 CSS 中实现相同的效果...不需要 JS 计算。

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;}