在行中居中n-div（引导）

Question

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

<div class="row proj-container">

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

</div>

我用javascript克隆并附加到内部。项目容器的数量可变。项目。它很好用，如果有问题的话。项目超过3个，由于网格配置，它们可以正确地包装到其他行上。我无法实现的是将这组div集中在其父对象中。

• 将“.text center”指定给父级不起作用
• 父对象上的文本对齐和子对象上的内联块不起作用
• 使父级灵活并合理：围绕子级的空间实现了居中，但覆盖了网格系统（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

这里还有一个解决方案。看看JSFIDLE。

.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>