Boris Kozarac Boris Kozarac - 5 months ago 8
CSS Question

Vertically aligning images in multiple lines

I have a bunch of images, is it possible to not define anything in HTML, only to style them in CSS so that they appear in multiple rows aligned vertically in each row? The following code works but

.wrapper
goes endlessly in one row, I would prefer to have a new row after 5 or 6 images.

https://jsfiddle.net/qfb57a49/

css

.wrapper {
display: flex;
align-items: center;
}


html

<div class="wrapper ">
<img src="http://placehold.it/150x160" alt="">
<img src="http://placehold.it/150x120" alt="">
<img src="http://placehold.it/150x200" alt="">
<img src="http://placehold.it/150x70" alt="">
<img src="http://placehold.it/150x170" alt="">
<img src="http://placehold.it/150x150" alt="">
<img src="http://placehold.it/150x250" alt="">
<img src="http://placehold.it/150x110" alt="">
<img src="http://placehold.it/150x210" alt="">
<img src="http://placehold.it/150x110" alt="">
<img src="http://placehold.it/150x210" alt="">
</div>

Answer

try this

css

.wrapper {

}

img {
  margin: 10px 20px;
  display:inline-block;
  vertical-align:top;
}

demo

Comments