pure.CSS：响应中心列

Question

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

使用Yahoo pure.CSS可以做到这一点吗？如果是的话，怎么样？

对于您的建议并提前多多感谢您的帮助！

Answer 1

您可以通过创建新的CSS帮助程序类来将div项置于纯网格.pure-g（.center { justify-content: center; } ）中心来实现此目的：

.pure-g

使用

justify-content是因为.center使用了flexbox。将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> 将使子项居中：

<input type="text" name="firstName"  ng-readonly="$location.search().memRen" />

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