图像在列中对齐

Question

我正在尝试在 WordPress 画廊中水平和垂直对齐多个图像。我想要一个连续 3 个图像的网格，每个图像都在中间对齐。

结构如下：

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

到目前为止，我在 CSS 中所拥有的：

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

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

到目前为止，居中效果很好。但它会产生与图像一样多的列。我想要的是每第三张图片之后的新行。

这是我迄今为止所做的jsfiddle。

感谢您的帮助！

Answer 1

您可以使用display: inline-block 并添加width: 33% 代替：

.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>