如何仅使用 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 的东西，但似乎找不到。我可以创建一个自定义 class 但是我更愿意使用内置选项（如果存在的话）。

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

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

How to horizontally align-center only for small and medium screens only using Zurb Foundation flex grid

html

css

sass

flexbox

zurb-foundation