Jquery 垂直居中图像

HTML:

。。但这不起作用。

有更好的办法吗？ 如果您使用的是jQuery，为什么不使用

当前问题 以下线路存在许多问题：

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

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

或许以下内容更有帮助：

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

---

我认为@Jonathan的答案是您应该遵循的，但以下是您的代码：

$("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);
});

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

垂直居中

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

---

减去'liimg'/2并不意味着什么。此部分选择器不传递值。实际上，高度、宽度、外光和外宽函数确实存在。padding-top=li的高度-图像的高度/2确保您的li具有位置：相对。插件works.czarchic，我说height是jQuery函数，但不是原生Javascript函数。Jonathan，oops，重新阅读代码，看到另一个height函数，我的坏.Dollar符号…你一定是PHP程序员；哈哈，不，我在存储jQuery结果集时总是使用美元符号。因此，var domElement=$h1[0]；var$resultSet=$h1；啊,；在我使用jQuery的所有时间里，我从来没有见过这种情况。很有意思。哦，这两种方法都很好。这只是了解什么是结果集，什么是普通DOM元素或普通JS变量的好方法。当您传入一个数字时，jQuery将自动假定它是以像素为单位的。

$("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);
});

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

$('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'});
});