如何仅使用 Zurb Foundation flex grid 仅针对中小型屏幕水平居中对齐

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