1

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%;
}
Aamu
  • 3,431
  • 7
  • 39
  • 61
  • Why do you need to use jQuery in order to achieve this? [Have a look at the flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/) container. There's a perfect example there of what you're trying to achieve without convoluting this in jQuery. – Ohgodwhy Dec 10 '15 at 18:30
  • @Ohgodwhy I want to use jquery to maximize the browser support. – Aamu Dec 10 '15 at 18:48

2 Answers2

3

You don't need jQuery to do this cross-browser.

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

All I did was add position relative to .snap and centered the images using position absolute.

* {
  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;
}
pizzarob
  • 11,711
  • 6
  • 48
  • 69
2

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>
DavidDomain
  • 14,976
  • 4
  • 42
  • 50