如何对齐元素以调整大小为中心？

Question

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> 

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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>