根據可疑的列數對齊中心

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