将图像置于内联<ul> </ul>中

Question

有一个非常简单的方法可以将每个<li>内部的图像居中放在我制作的简单旋转木马上。

它在初始页面加载时工作正常，但是当我点击刷新时，图像开始变得有点乱，而不是居中（参见下面的图像）

以下是我的jQuery方法：

$ul.children('li').each(function(){
        var $pic = $(this).children('img');
        var height = $pic.height();
        $pic.css({ paddingBottom: (200 - height)/2 + 'px' });
});

初始加载视图：

页面刷新视图：

不知道为什么会发生这种情况，我只能怀疑这是由于图像缓存造成的。如果你们想要转到实时链接，请看这里http://www.metsales.com/metropolitansales/constantcontact/td/acrobat.aspx？

感谢您的帮助。

Answer 1

最近我在这种情况下使用translateY。它应该是这样的

li {
    width: xxx; // set the item width
    height: xxx; // set the item height
    position: relative;
}

img {
    top: 50%;
    position: absolute;
    transform: translateY(-50%); // This should make the image go in direction to the top using 50% of its height value
}

提示：您应该避免<li>中的填充。

见啊！

Answer 2

li未正确对齐。你可以做的一件事就是让ul真的很宽，然后将li漂浮在那里。将此添加到您的CSS：

ul {
  width: 1000%;
}

li {
  float: left;
  height: 200px;
}

删除设置填充和边距的js并将其更改为：

 $ul.children('li').each(function(){
    var $pic = $(this).children('img');
    var height = $pic.outerHeight();
    $pic.css({ marginTop: (200 - height)/2 + 'px' });
 });

Answer 3

修复

 $ul.children('li').each(function(){
    var $pic = $(this).children('img');
    var height = $pic.outerHeight();
    $pic.css({ marginTop: (200 - height)/2 + 'px' });//remove this line
 });

由于您需要删除img标记中的margin-top: -100px;，因此请添加vertical-align: middle;

carousel li有padding: 5px; 在你的情况下，你不需要填充顶部和底部，但它是一个可选的给予hover影响