将图像垂直和水平对齐到中心 [英] Align image to the center both vertically and horizontally

问题描述

我有一张图片列表，我需要将这个图片垂直和水平对齐。如何使用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; 
宽度：100％; 
} 
 
＃snap-list .snap {
 width：202px; 
 height：202px; 
 float：left; 
 margin：5px; 
概述：1px固体lightgray; 
} 
 
＃snap-list .snap img {
 max-width：100％; 
最大高度：100％; 
 
  

解决方案

如果你真的想做这与jQuery，只是循环的列表项目，设置其相对位置，然后相应地定位图像，但它是没有必要与jQuery做到这一点。

您实际上必须等待每个图像被完全加载，否则你将无法获得图像的宽度和高度。

因此，像使用 relseanp 建议的那样使用CSS解决方案可能会更好。

这是一个例如。

（$''''）; $（window）.load（$） function（）{listItems.each（function（i，item）{var crntImg = $（item）.find（'img'）; $（item）.css（'position'，'relative'）; crntImg.css {position：'绝对'，t op：（$（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;身高：202px;向左飘浮; margin：5px;大纲：1px solid lightgray;}＃snap-list .snap img {max-width：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 class =snap> < img src =http://placehold.it/250x350> < /锂> < li class =snap> < img src =http://placehold.it/350x350> < /锂> < li class =snap> < img src =http://placehold.it/350x450> < /锂> < li class =snap> < img src =http://placehold.it/350x250> < /锂> < span class =clear_both>< / span> < / div>

I have a list of images which I need to align center both vertically and horizontally. How do I align the images in the center of the their respective li both horizontally and vertically using jquery?

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

解决方案

If you really want to do this with jQuery, just loop over the list items, set their position to relative an then position the images accordingly, but it is really not necessary to do this with jQuery.
You will actually have to wait for each image to be fully loaded, otherwise you will not get the width and height of the image.

So it might be better to use a CSS solution just like relseanp suggested.

Here is an example.

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>

这篇关于将图像垂直和水平对齐到中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！