jquery - 在 li 标签内居中 img 标签

Question

我用的是flex slider jquery插件

如何使用动态宽度和高度将图像集中在 slider 内？

<div class="flexslider">
    <ul class="slides">
        <li><img .../></li>
        <li><img .../></li>
    </ul>
</div>

ul.slides li
{
  margin: 0px; padding: 0px;
  text-align:center;
}

ul.slides li img
{
  width: 100%;
  /*display: table-cell; vertical-align: middle; does not work*/
}

Answer 1

这里有一个简单有效的 jQuery 解决方案供您使用。将此添加为新答案，因为它与我上面的另一个答案非常不同。

CSS 方式看起来很乱，我不完全确定@user1743214 的建议是否适用于 FlexSlider。

我已经复制了一些 FlexSlider 代码并将其设置在 JSFiddle 中。它不是动画或任何东西，但你有正确的结构和样式。

http://jsfiddle.net/cmp3R/1/

jQuery 代码(方便/存档)

$('.slides li').each( function() {
    var height = $(this).height();
    var imageHeight = $(this).find('img').height();

    var offset = (height - imageHeight) / 2;

    $(this).find('img').css('margin-top', offset + 'px');

});

CSS 更改

您需要为 <li> 设置高度每张幻灯片的 wrapper 。您可以在 CSS 中执行此操作。

jQuery

您得到 slider 的高度(即 X)和图像的高度(即 Y)，得到差异，差异的一半然后添加一个内联样式，将图像向下移动该量。 IE。

= (x-y)/2

您需要使用 each() 为 slider 中的每张幻灯片运行此程序，它应该将其偏移正确的量，以便它们垂直居中。

如果您使用插件的响应功能，我可以看到这是一个问题，但可以通过设置不同的 <li> 来解决它。每个屏幕尺寸的高度使用 @media查询。

希望对您有所帮助。