Question

我使用以下样式使用susy对齐页面中心的列：

card{ 
@include span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

但默认情况下它没有将元素（div）移动到页面的中心，如果我有单个元素，它将它放在左侧，但我希望将单个元素放在页面的中心。元素动态增长，并且它们不是静态的。

Answer 1

sudo <command> mixin生成span()属性，可以防止您的项目居中。请改用此功能，以避免不必要的输出：

float: left;

根据澄清评论进行更新...

有两种方法可以根据兄弟姐妹进行居中/左对齐。一个使用flexbox：

.card { 
  width: span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

另一个仅使用兄弟逻辑：

.container {
  display: flex;
  justify-content: center;
}

.card { 
  flex: 0 0 span(3 of 12);

  // add gutters to all but the first element
  & + & {
    margin-left: gutter(of 12);
  }
}

flexbox解决方案让所有内容保持中心，直到您填满空间。浮动解决方案仅在存在单个.card { @include span(3 of 12); outline: 1px dotted red; &:first-child:last-child { float: none; margin: 0 auto; } }

时居中

根据可疑列数对齐中心

1 个答案: