Images are aligned in columns

Question

I am trying to align multiple images horizontally and vertically inside a WordPress gallery. I want to have a grid of three images in a row, each of which is aligned in the middle.

Here is the structure:

<div class="gallery">
    <dl>
        <dt><img src="#" /></dt>
    </dl>
    <dl>
        <dt><img src="#" /></dt>
    </dl>
    <dl>
        <dt><img src="#" /></dt>
    </dl>
    <dl>
        <dt><img src="#" /></dt>
    </dl>
</div>

And what I still have in CSS:

.gallery {
    display: table;
    width: 100%;
    height: 100%;
}

dl {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Centering still works. But that makes a lot of columns as there are images. What I want is a new line after every third image.

Here is the jsfiddle of what I have done so far.

Thanks for any help!

Answer 1

You can use display: inline-blockand add width: 33%instead:

.gallery {
  display: table;
  width: 100%;
  height: 100%;
}
dl {
  display: inline-block;/*add display inline block*/
  text-align: center;
  vertical-align: middle;
  width: 33%;/*set width to 33%*/
}

<div class="gallery">
  <dl> <dt><img src="http://placehold.it/400x100" /></dt>

  </dl>
  <dl> <dt><img src="http://placehold.it/200x150" /></dt>

  </dl>
  <dl> <dt><img src="http://placehold.it/350x180" /></dt>

  </dl>
  <dl> <dt><img src="http://placehold.it/250x150" /></dt>

  </dl>
</div>

Run codeHide result