图像按列对齐

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>

图像按列对齐

Images align in columns

html

css

alignment