css - Bootstrap 中心 3 col-md-3 div

Question

我有一个像这样的包装器: <div class="community-images"></div>

在这个包装器中我有 3 个 col-md-3 div:

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

我想做的是将这 3 个 div 放在包装器的中心，我将如何完成它？

这是 CSS:

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Answer 1

更新:这是正常布局的好解决方案，不适用于 Twitter Bootstrap，因为它会破坏 Bootstrap 行为。查看 Jeben 的答案以获得更好的布局。

现代浏览器解决方案，适合您的问题。具有合理内容的 Flexbox 技术。

@media (min-width:992px) {
  .community-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

Bootply