Q: 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>


A: try this
css
.wrapper {

}

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

demo

A: .wrapper {
  align-items: center;
  width: 100%;
}

img {
  margin: 10px 20px;
  width: 20%;
}

it should work like that.
If you want more or less pictures in a row, change the % value in img{}

A: For the Flexbox solution
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}



.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
img {
  margin: 10px 20px;
}
<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>



A: try this code:
.wrapper {
}

img {
 margin: 10px 20px;
 width: 20%;
 float:left;
 vertical-align:middle;
}


A: Do you need like this    


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

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

    </style>
    <html>
    <head>
    <body>
    <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>
    </body>
    </head>
    </html>

