0

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

..しかし、これは機能していません。

4

3 に答える 3

6

より良い方法？

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);
});
于 2009-12-29T17:47:27.053 に答える
2

@Jonathanの答えはあなたが従うべきものだと思います（プラグインのセンタリング）が、ここにあなたのコードがかなりクリーンアップされています：

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

もちろん、これはliCSS で高さが固定されている場合にのみ機能します。

于 2009-12-29T17:57:57.513 に答える
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'});
});
于 2009-12-29T18:01:58.003 に答える