在行中居中 n-div (Bootstrap)

Question

我有一个 Bootstrap 行包含可变数量的 div，它们需要相对于父行居中。到目前为止 html 设置如下：

<div class="row proj-container">

    <div class="proj col-md-4 col-xs-12"></div>

</div>

使用 javascript 我克隆并在 .proj-container 中附加了可变数量的 .proj。它工作正常，如果 .proj 超过 3 个，由于网格配置，它们会正确地换行到其他行。我无法实现的是将这组 div 在其父项中居中。

将“.text-center”分配给父级无效
父级的文本对齐和子级的内联块不起作用
使父级 flex 和 justify:space-around 实现了子级居中但覆盖了网格系统 (col-md-4)，如果超过三个或在较小的设备上它们将不会换行...

知道如何设置样式以实现 div 的居中和环绕吗？

Answer 1

您可以尝试以下方法使网格列居中

.project-container {
   text-align: center; /* set all inline elements to be centered */
}

.project-container .proj {
  display: inline-block; /* set the columns to inline blocks so they are centered */
  float: none;
}

Answer 2

这是另一种解决方案。看看jsFiddle.

.proj {
  display: inline-block;
  height: 10px;
  border: 1px solid red;
  margin: 0 -2px;
  float: none;
}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row proj-container text-center">
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
  </div>
</div>

在行中居中 n-div (Bootstrap)

Center n-divs in row (Bootstrap)

centering

twitter-bootstrap