Question

嗯，这有点令人困惑，但你可以在这里看到：http://www.stevenacres.com/meggriffiths/#bettydew

图像需要居中。字幕也需要与图像齐平，向右冲洗。我无法使用display:table-cell，因为我已经使用display:none来使图库正常运行，因为我必须使用position:absolute和top:0来使用它们叠加，我无法真正居中。

所以我有以下两行jQuery：

$('.gallery ul li').each(function() {
    $('.gallery ul li').width($('.gallery ul li > img').width());
    $('.gallery ul li').css('margin-left','$(".gallery ul li > img").width() / 2');
});

第一个获取每个图像的宽度并相应地设置li ......这样，标题等可以放在图像所在的任何位置。第二行应该找到图像的宽度，并将css margin-left设置为该值的负，但我无法使数学计算起作用。我究竟做错了什么？

这是最终起作用的代码：

$('.gallery ul li').each(function() {
    $(this).width($(this).children().children().width() + 26);
    $(this).css('margin-left',-$(this).children().children().width() / 2 - 13);
});

Answer 1

我认为问题出在这行代码中......

$('.gallery ul li').css('margin-left','$(".gallery ul li > img").width() / 2')

width（）返回以像素为单位的值，你正在对它进行算术运算。如果先解析它然后进行计算，它会更好。

$('.gallery ul li').css('margin-left','parseInt($(".gallery ul li > img").width()) / 2')

我认为这对你有帮助......

Answer 2

您似乎没有在正确的位置运行代码。您正在使用jQuery的load动态加载库。所以代码应该在load的回调中。

此外，由于在执行此代码时可能无法加载图像，因此图像可能没有正确的width()，并且您的代码可能无法正常工作。您应该尝试使用css找到解决方案。也许用margin auto？否则，您的代码必须非常复杂才能处理许多边缘情况。

使用jQuery对中图像库，数学计算

2 个答案: