垂直居中图像

时间:2009-12-29 17:45:09

标签: jquery height center

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

..但这不起作用。

3 个答案:

答案 0 :(得分:6)

更好的方式?

如果您正在使用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 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);
});

答案 1 :(得分: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中具有固定高度的情况。

答案 2 :(得分:1)

垂直居中

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