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有两个居中的响应网格示例.