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>
Comments
Post a Comment