如何将画廊中不平整列表项目的最后一行居中

Question

我试图让我的玩具项目在此时作出响应，并且遇到了一个问题，我不确定是否可以解决该问题，以及该修补程序是否有意义。目前我SCSS代码如下所示（使用与Susy和断点）：

.moodlegrid{ 
    @include with-grid-settings($gutter: 0.85%){ 
     li{ 
      @include trailer(0.5); 
      @include isolate-grid(6,18); 
      @include breakpoint($william){ 
       &:nth-child(3n + 1) { clear: none; } 
       @include isolate-grid(9,18); 
      } 
      @include breakpoint($jack){ 
       &:nth-child(2n + 1) { clear: none; } 
       @include isolate-grid(18,18); 
      } 
     } 
    } 
} 

在桌面screensizes我得到一个3x3的图像栅格：

在一个中等规模的屏幕我选择了一个2列的显示，这导致单个列表项在九个在最后一行的底部：

因此，将最后一行的不平整项目居中（此时最后一项填满并卡住左栏）是否有意义？用Susy和简单的CSS来完成这项工作很容易吗？任何建议和灵感在哪个方向去头和尝试将不胜感激cuz在这种情况下，我有点失落和想法如何对待这件事。 ：最好的问候拉尔夫

Answer 1

所有你需要做的是重新定位的任何:last-child，这也是:nth-child(odd) - 从左侧移动它，推它一半的剩余距离：

@include breakpoint($william){ 
    &:nth-child(3n + 1) { clear: none; } 
    @include isolate-grid(9,18); 
    &:nth-child(odd):last-child { margin-left: space(9,18)/2; } 
} 

space(9,18)的剩余空间 - 9列，再加上一个额外的排水沟，如果你有偶数列的话，那就更简单了。假设余下的是8：

$position: $remainder/2; 
&:nth-child(odd):last-child { @include isolate($position,18); }