javascript - How to align elements center on resize? -

there position:inline-block; elements within wrapper, positioned absolutely.

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

here jsfiddle: jsfiddle.net/dralyuk/r7y7qucv/1/

var el = document.getelementsbyclassname('el');;  function buildgallery() {    (var = 0; < el.length; i++) {       el[i].style.position = 'static';        el[i].style.top = el[i].offsettop + 'px';      el[i].style.left = el[i].offsetleft + 'px';    }    (var = 0; < 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>

you need calculate width of wrapper , set marginleft.

which means this:

var el = document.getelementsbyclassname('el');;  function buildgallery() {  var elswrap = document.getelementsbyclassname('elswrap')[0];  	var maxleft = 0;    (var = 0; < 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";    (var = 0; < 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>