如何仅使用Zurb Foundation flex网格仅为中小屏幕水平对齐中心

Question

我想align-center这两列仅适用于medium down大小的屏幕，而不是大型屏幕。以前，此问题适用于small-centered和medium-centered，但不适用于 Zurb Foundation's Flex Grid 。

<div class="row">
  <div class="small-12 large-7 columns">
    <p>A: Left on large, centred otherwise</p>
  </div>
  <div class="small-12 large-5 columns>
    <p>B: Right on large, centred otherwise</p>
  </div>
</div>

我一直在寻找align-center-middle之类的东西，但似乎无法找到任何东西。我可以创建一个自定义类，但如果存在，我更喜欢使用内置选项。

Answer 1

如果没有人知道使用内置Zurb Foundation功能的方法，我将这些辅助类添加到我的项目中：

.align-center-small {
  @include breakpoint(small only) {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}

.align-center-medium {
  @include breakpoint(medium only) {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}

.align-center-large {
  @include breakpoint(large only) {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}