垂直居中图像答案

【问题标题】：Centering images vertically垂直居中图像
【发布时间】：2010-12-30 20:37:12
【问题描述】：

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

.. 但这不起作用。

【问题讨论】：

minus "('li img') / (2)" 并没有任何意义。这个部分选择器不传递值。

标签： jquery height center

【解决方案1】：

更好的方法？

如果您使用 jQuery，为什么不使用 one of the centering plugins？

// 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);
});

【讨论】：

其实height、width、outerHeight、outerWidth函数确实存在。
padding-top = li 的高度 - 图像的高度 / 2
确保你的 li 有“position:relative”。该插件有效。
czarchaic，我说height()是一个jQuery函数，而不是原生Javascript函数。
乔纳森，哎呀，重读代码，看到另一个高度函数，我的错。

【解决方案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 中具有固定高度时才有效。

【讨论】：

美元符号...你必须是 PHP 程序员 ;)
大声笑，不，我在存储 jQuery 结果集时总是使用美元符号。所以var domElement = $("h1")[0]; 和var $resultSet = $("h1");
啊；在我使用 jQuery 的所有时间里，我从未见过这种情况。很有趣。
哦，无论哪种方式都可以正常工作。它只是了解什么是结果集以及什么是普通 DOM 元素或普通 JS 变量的好方法。

【解决方案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'});
});

【讨论】：

+'px' 不是必需的。当你传入一个数字时，jQuery 会自动假定它以像素为单位。