垂直居中图像

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 Framework中的一个有效方法.另外,("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);
});