图像垂直居中

Question

HTML：

<ul>
  <li><img src="image1.png" /></li>
  <li><img src="image2.png" /></li>
  <li><img src="image3.png" /></li>
  <li><img src="image4.png" /></li>
  <li><img src="image5.png" /></li>
  <li><img src="image6.png" /></li>
</ul>

...图像大小不同，我想将它们垂直居中。

jQuery：

$('ul li').css('paddingTop', height($("ul li").height() - ("li img") / (2)));
# padding-top = height of li - height of image / 2

..但这不起作用。

Answer 1

更好的方法？

如果您使用 jQuery，为什么不使用居中插件之一？

// make sure li in this case is position:relative;
$("ul li img").center();

目前的问题

下面的行有很多问题：

height($("ul li").height() - ("li img") / (2))

height() 不是一个函数，除非您在其他地方声明了它。如果是这样，它到底应该做什么？请注意，我不是指 $.height()，它是 jQuery 框架中的有效方法。此外，("li img") 不是数值，因此将其除以 2 没有任何意义。

也许以下内容可能更有帮助：

$("ul li img").each(function(){
  var pHeight = $(this).parent().height();
  var iHeight = $(this).height();
  var diff    = Math.round(pHeight - iHeight);
  $(this).parent().css("paddingTop", diff);
});

Answer 2

我认为 @Jonathan 的答案是你应该遵循的（居中插件），但这里是你的代码清理了不少：

$('ul li').each(function(){
   var $li = $(this), $img = $li.find('img');
   $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
});

当然，这只有当 li 在 CSS 中具有固定高度时才有效。

Answer 3

垂直居中

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