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%代替：

＆＃13;

.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%*/
}

＆＃13;

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

＆＃13;

图像在列中对齐

1 个答案: