Display an image with caption in a centered container.

HTML

<div class="gallery">
  <div class="imageContainer">
    <div>
      <img src="http://dummyimage.com/250" />
    </div>
    <span
      >...caption... ...caption... ...caption... ...caption...
      ...caption...</span
    >
  </div>
  <div class="imageContainer">
    <div>
      <img src="http://dummyimage.com/250" />
    </div>
    <span
      >...caption...</span
    >
  </div>
  <div class="imageContainer">
    <div>
      <img src="http://dummyimage.com/250" />
    </div>
    <span
      >...caption...</span
    >
  </div>
</div>

CSS

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.imageContainer {
    display: table;
    margin: 1em auto;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    display: table-cell;
}
.imageContainer span {
    display: table-caption;
    caption-side: bottom;
    color: #fff;
    background: rgba(0,0,0,.5);
    padding: 3px;
    text-align: center;
    vertical-align: center;
}