jquery - 使用 jQuery 居中图片库，数学计算

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 设置为该值的 negative，但我无法进行数学计算。我究竟做错了什么？





这是最终有效的代码:

$('.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')

我想这可能对你有帮助...