在行中居中 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

这是另一种解决方案。看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>

Answer 2

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

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