居中内联块

Question

我们有一个用红色边框框起来的容器，里面包含了许多用绿色边框框起来的小型内联块元素。大概看起来已经符合我的需求了。

HTML：

 .featuredBoxContainer {
    max-width: 1780px;
    max-height: 468px;
    border: 1px solid red;
    margin-right: auto;
    margin-left: auto;
    overflow:hidden;
    }
    .featuredBox {
      display: inline-block;
      width: 200px;
      height: 130px;
      margin: 10px;
      border: 1px solid green;  
    }

<div class="featuredBoxContainer">
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div> 
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>             
        </div>

当页面缩小时，我的问题变得更加明显。

这些元素都向左浮动，而我希望它们居中。

问题很简单。如何在容器内将它们居中？

- Felix

---

媒体查询。这里有一些背景和潜在解决方案（答案可能在一半的时候看起来无关）：https://dev59.com/clwY5IYBdhLWcg3wRGBS#32811002 - Michael Benjamin

https://jsfiddle.net/b80kgtn0/ - Michael Benjamin

我一开始确实考虑了媒体查询，但又希望有更直观/更容易的方法来做到这一点。感谢提供代码片段。 - Felix

Answer 1

那么只需在.featureBoxContainer中添加以下内容：

text-align: center;

我建议您了解CSS3 flex。请查看以下链接：http://www.w3schools.com/css/css3_flexbox.asp

.featuredBoxContainer {
  max-width: 1780px;
  max-height: 468px;
  border: 1px solid red;
  overflow:hidden;
  text-align: center;
}
.featuredBox {
  display: inline-block;
  width: 200px;
  height: 130px;
  margin: 10px;
  border: 1px solid green;  
}

<div class="featuredBoxContainer">
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div> 
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>             
</div>

- j3ff

---

我一开始尝试添加text-align:center;，但问题是它会像这样显示：http://i.imgur.com/CKNJpFi.png左侧总是有更多的空白。也许有一种方法可以解决这个问题。 - Felix

这很奇怪，因为这种行为在代码片段中并没有发生。是否还涉及其他HTML/CSS代码？ - j3ff

@FelixMaxime 这是因为您在第一个元素左侧设置了边距。 - Francisco Romero

找到原因了！当我在尝试切换容器/元素为ul/list项时，ULs在左侧有一个自然边距。现在一切都正常了。谢谢！ - Felix

Answer 2

如果你只支持现代浏览器，那么flexbox是一个选项。在容器上，你需要使用display:flex;、justify-content:center和flex-wrap:wrap。为了更广泛的支持，需要使用供应商前缀。

.featuredBoxContainer {
  max-width: 1780px;
  max-height: 468px;
  border: 1px solid red;
  margin:0 auto;
  overflow:hidden;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.featuredBox {
  display: inline-block;
  width: 200px;
  height: 130px;
  margin: 10px;
  border: 1px solid green;  
}

<div class="featuredBoxContainer">
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div> 
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>             
</div>

- Matthew Johnson