CODEWITHSUNDEEP
javascriptcss
Konstantin Dralyuk
Konstantin Dralyuk

Reputation: 3

How to align elements center on resize?

There are position:inline-block; elements within wrapper, but positioned absolutely.

Using text-align:center or margin:0 auto are not working.

Here is a JSFiddle: jsfiddle.net/dralyuk/r7y7qucv/1/

var el = document.getElementsByClassName('el');;
function buildGallery() {
  for (var i = 0; i < el.length; i++) { 
    el[i].style.position = 'static';  
    el[i].style.top = el[i].offsetTop + 'px';
    el[i].style.left = el[i].offsetLeft + 'px';
  }
  for (var i = 0; i < el.length; i++) {
    el[i].style.position = 'absolute';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
.elsWrap {
  font-size: 0;  
  position: relative;
}

.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow:hidden;
}

img {
  width:100%;
  height: auto;
}
  
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>    
</div>

Upvotes: 0

Views: 57

Answers (4)

maowtm
maowtm

Reputation: 2012

You need to calculate the width of wrapper and set its marginLeft.

Which means this:

var el = document.getElementsByClassName('el');;
function buildGallery() {
var elsWrap = document.getElementsByClassName('elsWrap')[0];
	var maxLeft = 0;
  for (var i = 0; i < el.length; i++) { 
    el[i].style.position = 'static';  
    el[i].style.top = el[i].offsetTop + 'px';
    el[i].style.left = el[i].offsetLeft + 'px';
    if(maxLeft < el[i].offsetLeft)
    	maxLeft = el[i].offsetLeft;
  }
  var width = maxLeft + 125;
  var windowWidth = window.innerWidth;
  elsWrap.style.marginLeft = ((windowWidth - width) / 2) + "px";
  for (var i = 0; i < el.length; i++) {
    el[i].style.position = 'absolute';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
.elsWrap {
  font-size: 0;  
  position: relative;
}

.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow:hidden;
}

img {
  width:100%;
  height: auto;
}
  
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>    
</div>

Upvotes: 0

Paweł Szymański
Paweł Szymański

Reputation: 7792

In order to center wrapper div it has to have some width and height set, without that browser have no idea how to position the wrapper element:

var images = document.getElementsByTagName('img');
var wrapper = document.getElementsByClassName('wrapper')[0];

function buildGallery() {
  for (var i = 0; i < images.length; i++) { 
    images[i].style.position = 'static';  
    images[i].style.top = images[i].offsetTop + 'px';
    images[i].style.left = images[i].offsetLeft + 'px';
  }
  for (var i = 0; i < images.length; i++) {
    images[i].style.position = 'absolute';
  }
  wrapper.style.width = '300px';
  wrapper.style.height = '400px';
}

Here is a fiddle: http://jsfiddle.net/r7y7qucv/9/ just do your math on the dimensions of the wrapper.

PS No need to use div wrappers.

Upvotes: 0

Rayon
Rayon

Reputation: 36599

You should be using inline-block property of display. To achieve it using position:absolute, you must know the width of the parent element.

Parent element should have text-align:center to have child elements to be in center.

Try this:

var el = document.getElementsByClassName('el');;

function buildGallery() {
  for (var i = 0; i < el.length; i++) {
    el[i].style.display = 'inline-block';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
.elsWrap {
  font-size: 0;
  position: relative;
  text-align: center;
}
.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto;
}
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
</div>

Fiddle here

Upvotes: 1

Zlatan Omerovic
Zlatan Omerovic

Reputation: 4097

As I understood you, you want to center your images in the elWrap container.

This is what you should have done:

.elsWrap {
  font-size: 0;  
  position: relative;
  text-align: center;
}

It will center all the contents within that selector.

Upvotes: 0

Related Questions