根据列数居中对齐

Question

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

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

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

Answer 1

span() mixin 会生成一个 float: left; 属性，该属性可防止项目居中。请改用该函数以避免不需要的输出：

.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);
  }
}

另一个仅使用同级逻辑：

.card { 
  @include span(3 of 12);
  outline: 1px dotted red;
  &:first-child:last-child {
    float: none;
    margin: 0 auto;
  }
}

flexbox 解决方案使所有内容保持居中，直到您填满空间。浮动解决方案仅在存在单个.card时才居中