yui-pure-css - pure.CSS：响应式居中列

Question

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

可以用 Yahoo pure.CSS 做到这一点吗？如果是，如何？

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

Answer 1

您可以通过创建一个新的 CSS 帮助器类来实现此目的，以使.pure-u-*项目在纯网格div( .pure-g) 中居中：

.center {
  justify-content: center;
}

justify-content使用是因为.pure-g使用了 flexbox。将.center类添加到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有两个居中响应网格的例子。