内联图像居中<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
 });

因为您需要删除margin-top: -100px; 在img标签中还添加了vertical-align: middle;

carousel li有padding: 5px; 在您的情况下，您不需要顶部和底部填充，但是它是可选的，可以使hover