居中的内嵌块

Question

所以我们有一个装有红色边框的容器，里面装着一串小的内嵌块元素，边框为绿色。它看起来或多或少都是我想要的。

HTML：

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

CSS：

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

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

这些元素都向左浮动，而我更喜欢它们居中。

非常直截了当的问题。如何将这些放在容器中？

Answer 1

如何只添加.featureBoxContainer以下

text-align: center;

我还建议你看看CSS3 flex

http://www.w3schools.com/css/css3_flexbox.asp

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>