pure.CSS：响应式居中列

Question

使用 Bootstrap 3 有一个简单的解决方案可以将多个列居中，如下所述：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

雅虎 pure.CSS 可以做到这一点吗？如果是，怎么做？

提前感谢您的建议和帮助！

Answer 1

您可以通过创建一个新的 CSS 助手 class 来将 .pure-u-* 项置于纯网格 div (.pure-g) 的中心来实现此目的：

.center {
  justify-content: center;
}

使用

justify-content是因为.pure-g使用了flexbox。将 .center class 添加到定义纯网格的 div 将使子项居中：

<div class="pure-g center" style="background-color:blue">
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:teal">
      column 1
    </div>
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:red">
      column 2
    </div>
</div>

此 CodePen 有两个居中响应网格示例。

pure.CSS：响应式居中列

pure.CSS: responsive centered columns

yui-pure-css