根据列数对齐中心

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

---

根据澄清评论更新...

您可以通过两种方式根据同级进行居中/左对齐。一个使用 flexbox：

.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 时居中