Foundation 4 仅在小屏幕上居中对齐答案

【问题标题】：Foundation 4 center align only on small screenFoundation 4 仅在小屏幕上居中对齐
【发布时间】：2013-04-09 19:18:26
【问题描述】：

刚开始使用 Zurb Foundation 并从版本 4 开始，我无法找到一种方法让网格仅在小屏幕上与中心对齐，然后在大屏幕上恢复为默认网格。 Foundation 4 提供的任何本机类可以做到这一点吗？

我查看了他们在http://foundation.zurb.com/docs/components/grid.html 上的文档，其中演示了“小中心”和“大中心”类，它们按预期工作，但有一行说

如果没有被大版本覆盖，小版本将执行所有断点。

对我来说，这听起来像是我需要创建一个类来覆盖大型显示器上“小中心”类的中心对齐，或者存在一个类 - 我找不到。

这是我正在测试的一些示例代码：

<div class="row">
    <div class="large-2 columns">
        <span>text</span>
    </div>
    <div class="large-6 columns">
        <span>text</span>
    </div>
    <div class="large-4 columns">
        <span>text</span>
    </div>
</div>

网格系统按预期运行，但我希望所有三列仅在小屏幕上居中对齐。

如果我确实需要创建自己的类和样式，是否有人知道 SCSS 可能已经在社区中解决了这个问题？

【问题讨论】：

您希望所有三列在一行上居中对齐吗？
旁注：我用 SCSS 标记了这篇文章，但它默认为 SASS。我知道它们基本相同，但有什么理由不能将其标记为 SCSS？
@vonv。是的，每个“列”都应该在小显示器上堆叠并居中对齐
这是 SO 的自动标记功能。 SCSS = SAAS。
这很有趣，我没有尝试过，我不认为这是内置的。您可能必须覆盖它。这值得一看源代码。当我发现一些东西时会更新你。

标签： sass zurb-foundation css-frameworks

【解决方案1】：

事实证明，这是不支持开箱即用的。不过有一个简单的解决方法，那就是按照我在评论中的建议添加覆盖。

@media only screen and (min-width: 48em) {
    .column.large-left,
    .columns.large-left { 
        float: left !important; 
    }        
}

注意em 的使用，这是基金会标准的做事方式。这应该解决smal-centered 问题。然后，您只需将该类添加到您不想居中的任何 small-centered 元素中。你可以see it in action here。

【讨论】：

谢谢@vonv。效果很好。感谢您花在这方面的时间，并提供了一个遵循 Foundation 标准的工作示例。

【解决方案2】：

Foundation 非语义类无法做到这一点。

您必须手动完成，并且（希望）在语义上：

@media only screen and (max-width: 767px) {
  .some-container { text-align: center; }
}

【讨论】：

【解决方案3】：

您需要检查 CSS 文件并搜索仅适用于小屏幕的媒体查询，然后为该特定列添加属性。

【讨论】：

是的，查看了源代码，但找不到任何符合目的的逻辑名称。也许这个功能不存在
你必须为特定的媒体查询添加新的 CSS 属性。我现在没有基础 css 文件，但我知道有媒体查询，您可以使用它们为每种分辨率/设备/类型做不同的样式。