So recently while making a responsive website, I needed to create a few images that would automatically rearrange with the screen size. So after searching around for few different ways to do this, I found the HTML5 figure tag that made things a lot easier. I used it with the figcaption tag to make the captioning easier as well.

The HTML:

<figure>
  <img src="created.png" alt="created image" />
  <figcaption>Created</figcaption>
</figure>
<figure>
  <img src="original.jpg" alt="original image" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img src="altered.jpg" alt="altered image" />
  <figcaption>Altered</figcaption>
</figure>

The CSS:

figure {
  display: inline-table;
  margin: auto;
}
figcaption {
  text-align: center;
  font-weight: bold;
}