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

【问题标题】：Align image to the center both vertically and horizontally将图像垂直和水平对齐到中心
【发布时间】：2015-12-11 03:24:59
【问题描述】：

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

codepen.io 上的演示。

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%;
}

【问题讨论】：

为什么需要使用 jQuery 来实现这一点？ Have a look at the flexbox 容器。那里有一个完美的例子，说明你想要在 jQuery 中实现的目标。
@Ohgodwhy 我想使用 jquery 来最大化浏览器支持。

标签： jquery html css

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

【讨论】：

完美！非常感谢。

【解决方案2】：

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

所以最好像 relseanp 建议的那样使用 CSS 解决方案。

这是一个例子。

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

* {
  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%;
}

<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>

【讨论】：

好的。我认为css也是这样。谢谢。