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

Question

我有一个图像列表，我需要在垂直和水平方向上居中对齐。如何使用 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%;
}

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