Question

我有一个图像列表，我需要垂直和水平对齐中心。如何使用jquery在水平和垂直方向上对齐各自li中心的图像？

HTML：

  <ul id="snap-list">
    <li class="snap">
      <img src="http://placehold.it/350x150">
    </li>
    <li class="snap">
      <img src="http://placehold.it/250x350">
    </li>
    ...
    ...
    ...
    <li class="snap">
      <img src="http://placehold.it/350x250">
    </li>
    <span class="clear_both"></span>
  </ul>

的CSS：

#snap-list {
  list-style-type: none;
  width: 100%;
}

#snap-list .snap {
  width: 202px;
  height: 202px;
  float: left;
  margin: 5px;
  outline: 1px solid lightgray;
}

#snap-list .snap img {
  max-width: 100%;
  max-height: 100%;
}

Answer 1

你不需要jQuery来做这个跨浏览器。

http://codepen.io/anon/pen/PZqdbV

我所做的就是添加相对于.snap的位置，并使用绝对位置对图像进行居中。

* {
  margin: 0;
  padding: 0;
}

.clear_both {
  display: block;
  clear: both;
}

#main_content {
  width: 850px;
  margin: 0 auto;
}

#snap-list {
  list-style-type: none;
  width: 100%;
}

#snap-list .snap {
  width: 202px;
  height: 202px;
  float: left;
  margin: 5px;
  outline: 1px solid lightgray;
  position: relative;
}

#snap-list .snap img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

Answer 2

如果你真的想用jQuery做这个，只需循环遍历列表项，将它们的位置设置为相对，然后相应地定位图像，但实际上没有必要用jQuery做这个。
您实际上必须等待每个图像完全加载，否则您将无法获得图像的width和height。

所以使用CSS解决方案可能会更好，就像 relseanp 建议一样。

这是一个例子。

＆＃13;

var listItems = $('#snap-list').find('li');

$(window).load(function() {
  listItems.each(function(i, item) {
    var crntImg = $(item).find('img');
    $(item).css('position', 'relative');
    crntImg.css({
      position: 'absolute',
      top: ($(item).height() /  2) - (crntImg.height() / 2),
      left: ($(item).width() /  2) - (crntImg.width() / 2)
    });
  })
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.clear_both {
  display: block;
  clear: both;
}

#main_content {
  width: 850px;
  margin: 0 auto;
}

#snap-list {
  list-style-type: none;
  width: 100%;
}

#snap-list .snap {
  width: 202px;
  height: 202px;
  float: left;
  margin: 5px;
  outline: 1px solid lightgray;
}

#snap-list .snap img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="main_content">

  <ul id="snap-list">
    <li class="snap">
      <img src="http://placehold.it/350x150">
    </li>

    <li class="snap">
      <img src="http://placehold.it/250x350">
    </li>

    <li class="snap">
      <img src="http://placehold.it/350x350">
    </li>

    <li class="snap">
      <img src="http://placehold.it/350x450">
    </li>

    <li class="snap">
      <img src="http://placehold.it/350x250">
    </li>

    <span class="clear_both"></span>
  </ul>
</div>

＆＃13;

将图像垂直和水平对齐到中心

2 个答案: