html - 图像在列中对齐

我正在尝试在 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 。

谢谢你的帮助!

最佳答案

您可以使用 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>

关于html - 图像在列中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31448949/