Ad

How To Align Elements Center On Resize?

- 1 answer

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>

Ad

Answer

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

Ad
source: stackoverflow.com
Ad