susy 画廊中项目的垂直对齐（）

Question

我如何vertical-align: middle susy gallery() 中的项目？我附上的图片显示了我的项目目前的垂直对齐方式。从我的突出显示中可以看出，它们目前都是vertical-align: top。

提前谢谢你。

奥利弗

Answer 1

使用gallery() 是不可能的，因为 CSS 没有任何方法可以垂直居中浮动。要获得居中的画廊，您应该使用 flexbox、grid、display-table 或 inline-block 布局。如果有帮助，您仍然可以使用 Susy 进行数学运算。这里是 flexbox：

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  background: lightgray;
  flex-basis: span(1 of 6);
  margin-right: gutter(of 6);

  &:nth-child(6n) {
    margin-right: 0;
  }
}